首頁 > web前端 > css教學 > css選擇器優先順序總結!

css選擇器優先順序總結!

藏色散人
發布: 2018-10-24 16:51:14
原創
10994 人瀏覽過

本篇文章主要來介紹css選擇器優先權順序是怎樣的。

首先大家應該都知道什麼是css選擇器吧?

如果我們在設計網頁頁面時,使用css對HTML頁面中的元素實現一對一,一對多或多對一的控制,這就需要用到CSS選擇器。

而HTML頁面中的元素就是透過CSS選擇器來控制的。

簡單來說,選擇器可以這樣理解。

每一條css樣式定義由兩個部分組成,形式如下:

[code] 選擇器{樣式} [/code] 在{}之前的部分就是「選擇器」。

「選擇器」指明了{}中的「樣式」的作用對象,也就是「樣式」作用於網頁中的哪些元素。

那麼大家可以簡單了解下css選擇器有哪些分類

一、標籤選擇器

body,div,p,ul,li...
登入後複製

二、類別選擇器

class="demo"
class="demo_1"
登入後複製

#三、ID選擇器

id="name",id="name_t"
登入後複製

四、全域選擇器

*
登入後複製

五、組合選擇器

.demo .demo_1
/*两选择器用空格键分开*/
登入後複製

六、後代選擇器

#head .nav ul li
 /* 从父集到子孙集的选择器 */
登入後複製

七、群組選擇器

div,span,img {color:blue}
/*即具有相同样式的标签分组显示*/
登入後複製

八、繼承選擇器

div p
/*两选择器用空格键分开*/
登入後複製

九、偽類別選擇器

link、visited、active、hover...
/* 链接样式,a元素的伪类,4种不同的状态*/
登入後複製

十、字串匹配的屬性選擇符

^ $ *
/*分别对应开始、结尾、包含*/
登入後複製

十一、子選擇器

div>p
/* 带大于号>*/
登入後複製

十二、CSS 相鄰兄弟選擇器

h1+p
/*  带加号+ */
登入後複製

了解完css分類,大家也需要簡單了解下什麼是層疊性?

層疊性:就是css處理衝突的能力。層疊性是一種能力。當多個選擇器描述了同一個屬性的時候,這個屬性到底該聽誰的?

那麼下面我們就跟大家總結了css選擇器的優先順序

css優先權高低排序!important >行內樣式>ID選擇器> 類別選擇器> 標籤> 通配符> 繼承> ; 瀏覽器預設屬性

這個排序的根據主要是因為每個選擇器都有自己的權重,每條css規則都包含一個權重級別,這個級別是不同的選擇器加權計算得來的。不同層次的權重會產生不同的樣式,不同的樣式會在你的網頁中表現出來。

那麼 關於css權重的詳情大家可以參考這篇文章

css中優先順序的衡量標準是什麼? css權重的用法介紹

想要了解更多前端相關知識,可以關注PHP中文網CSS影片教學Bootstrap教學等等相關教程,歡迎大家參考學習!

以上是css選擇器優先順序總結!的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板