CSS中的選擇器優先順序的詳細介紹

特殊性是什麼

在對一個HTML元素應用CSS樣式時，常常有很多種方法可以找到元素，例如：

<p id="container" class="wrap_sty">   
    <p class="pra">这是一个段落</p>   
</p>   
<style>   
    #container p { color:red }   
    p p { color:green }   
    p { color:yellow }    
</style>

可見，如果要作用到一個HTML元素的方法很多，遠遠不只這些。那麼如果一個元素被套用了很多同樣的樣式，最後又會顯式到哪一個樣式呢？ CSS對於多個選擇器的優先性使用了一個稱為特殊性的方式。

CSS特殊性
選擇器的特殊性分為4個等級，a b c d，從左到右，越左邊的越優先, 如果一個選擇器規則有多個相同類型選擇器，則+1。
如果是HTML內樣式，那麼特殊性最優先，a=1
id選擇器的特殊性是b，
類別選擇器、偽類別選擇器、屬性選擇器為c
標籤選擇器、偽元素選擇器為d
先說一些選擇器類型：
1.id選擇器

#myid { ... }

2.類別選擇器

.myclass { ... }

3.標籤選擇器

p { ... }

4.屬性選擇器

[title="mytitle"] { ... }

由於大多數文件例如W3CSCHOOL可能並沒有詳細說明，或許不少人認為屬性選擇器是這樣的  p[title="mytitle"]或#id[title="mytitle"]等等，這樣是屬性選擇器，嚴格來說，這樣的並非單純的屬性選擇器，而是由id選擇器、標籤選擇器等等和屬性選擇共同組成的。
5.偽類選擇器

p:hover { ... }

常見的偽類選擇器有：
連結偽類，:link， :visited，用於錨元素。
動態偽類，:hover，:focus，:active，用於任何選擇。
6.偽元素選擇器

p::after { ... }   
p::before { ... }

偽元素和偽類是完全不同的概念，之所以稱之為偽元素，因為其確實可以產生一個虛擬的HTML元素，只不過偽元素無法被DOM取得。
偽元素的應用有很多，最常見的例如::after清除浮動：

<ul>   
    <li>A</li>   
    <li>B</li>   
</ul>   
<style>   
    li { float:left }   
    ul::after { content: ""; display: block; clear: both }   
</style>

#CSS特殊性範例
#下面是一些CSS選擇器的特殊性範例：

##0, 0, 1, 0100, 0, 0, 110, 0, 0, 110, 0, 0, 22

選擇器	特殊性	以10為基底數的特殊性
style="color: red"	#1, 0, 0, 0	1000
#id ​​{}	0, 1, 0, 0	100
#id ​​#aid	0, 2, 0, 0	#200
.sty {}	0, 0, 1, 0	10
.sty p[title=""] { }	0, 0, 2, 0	20
p:hover {}
#p {}
ul::after {}
p p {}

如果兩個規則的特殊性相同，那麼後面定義的會覆寫先定義的。

CSS重要性
CSS中還有一種東西可以無視特殊性，那就是!important，使用此標記的CSS屬性總是最優先的。

#id { color: red }   
.class { color: yellow !important }

第二個樣式會優先於第一個樣式，即使id選擇器的特殊性高於類別選擇器。

如果兩個屬性都有 !important 那麼由特殊性來決定優先順序。

#id { color: red ！important }   
.class { color: yellow !important }

結果是第一個樣式優先於第二個樣式。

IE6對 !important 的支援並不完全，在IE6中，如果一個選擇器中先定義了 !important 屬性，後面又定義了一個同樣的不帶 !important 的屬性，那麼!important 會失效。

p {   
  color: yellow !important;     
  color: red;   
}

在IE6中，可就沒辦法黃了，還是見點血吧！

IE6/7還可以在 !important 後面加點料，也不會失去味道，但建議別這麼無聊！

div {   
  color: yellow !important you are dead;   /* IE6/7依然有效 */  
}

#

以上是CSS中的選擇器優先順序的詳細介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！