欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

詳解CSS中的選擇器優(yōu)先級(jí)順序

簡(jiǎn)書(shū)   發(fā)布時(shí)間：2016-06-21 11:59:40   作者：牧歌_   我要評(píng)論
CSS在使用選擇器對(duì)元素施加屬性的時(shí)候會(huì)有先后順序,包括特殊性和重要性等概念在內(nèi),這里我們就來(lái)詳解CSS中的選擇器優(yōu)先級(jí)順序,需要的朋友可以參考下

特殊性是什么
在對(duì)一個(gè)HTML元素應(yīng)用CSS樣式時(shí)，常常有很多種方法可以找到元素，比如：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. <div id="container" class="wrap_sty">   
  2.     <p class="pra">這是一個(gè)段落</p>   
  3. </div>   
  4. <style>   
  5.     #container p { color:red }   
  6.     div p { color:green }   
  7.     p { color:yellow }    
  8. </style>  

可見(jiàn)，如果要作用到一個(gè)HTML元素的方法有很多，遠(yuǎn)遠(yuǎn)不止這些。那么如果一個(gè)元素被應(yīng)用了很多同樣的樣式，最終會(huì)顯式到哪一個(gè)樣式呢？CSS對(duì)于多個(gè)選擇器的優(yōu)先性使用了一個(gè)叫做特殊性的方式。

CSS特殊性
選擇器的特殊性分為4個(gè)等級(jí)，a b c d，從左到右，越左邊的越優(yōu)先, 如果一個(gè)選擇器規(guī)則有多個(gè)相同類(lèi)型選擇器，則+1。
如果是HTML內(nèi)樣式，那么特殊性最優(yōu)先，a=1
id選擇器的特殊性是b，
類(lèi)選擇器、偽類(lèi)選擇器、屬性選擇器為c
標(biāo)簽選擇器、偽元素選擇器為d
先來(lái)說(shuō)說(shuō)一些選擇器類(lèi)型：
1.id選擇器

CSS Code復(fù)制內(nèi)容到剪貼板
  1. #myid { ... }  

2.類(lèi)選擇器

CSS Code復(fù)制內(nèi)容到剪貼板
  1. .myclass { ... }  

3.標(biāo)簽選擇器

CSS Code復(fù)制內(nèi)容到剪貼板
  1. p { ... }  

4.屬性選擇器

CSS Code復(fù)制內(nèi)容到剪貼板
  1. [title="mytitle"] { ... }  

由于大多數(shù)文檔例如W3CSCHOOL可能并沒(méi)有詳細(xì)說(shuō)明，或許不少人認(rèn)為屬性選擇器是這樣的  div[title="mytitle"] 或#id[title="mytitle"]等等，這樣是屬性選擇器，嚴(yán)格來(lái)說(shuō)，這樣的并非單純的屬性選擇器，而是由id選擇器、標(biāo)簽選擇器等等和屬性選擇共同組成的。
5.偽類(lèi)選擇器

CSS Code復(fù)制內(nèi)容到剪貼板
  1. p:hover { ... }  

常見(jiàn)的偽類(lèi)選擇器有：
鏈接偽類(lèi)，:link， :visited，用于錨元素。
動(dòng)態(tài)偽類(lèi)，:hover，:focus，:active，用于任何選擇。
6.偽元素選擇器

CSS Code復(fù)制內(nèi)容到剪貼板
  1. p::after { ... }   
  2. p::before { ... }  

偽元素和偽類(lèi)是完全不同的概念，之所以稱(chēng)之為偽元素，因?yàn)槠浯_實(shí)可以生成一個(gè)虛擬的HTML元素，只不過(guò)偽元素?zé)o法被DOM獲取到。
偽元素的應(yīng)用有很多，最常見(jiàn)的比如::after清除浮動(dòng)：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. <ul>   
  2.     <li>A</li>   
  3.     <li>B</li>   
  4. </ul>   
  5. <style>   
  6.     li { float:left }   
  7.     ul::after { content: ""; display: block; clear: both }   
  8. </style>  

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

選擇器 特殊性 以10為基數(shù)的特殊性
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 {} 0, 0, 1, 0 10
p {} 0, 0, 0, 1 1
ul::after {} 0, 0, 0, 1 1
div p {} 0, 0, 0, 2 2

如果兩個(gè)規(guī)則的特殊性相同，那么后定義的會(huì)覆蓋先定義的。

CSS重要性
CSS中還有一種東西可以無(wú)視特殊性，那就是!important，使用此標(biāo)記的CSS屬性總是最優(yōu)先的。

CSS Code復(fù)制內(nèi)容到剪貼板
  1. #id { color: red }   
  2. .class { color: yellow !important }  

第二個(gè)樣式會(huì)優(yōu)先于第一個(gè)樣式，即使id選擇器的特殊性高于類(lèi)選擇器。
如果兩個(gè)屬性都有 !important 那么由特殊性來(lái)決定優(yōu)先級(jí)。

CSS Code復(fù)制內(nèi)容到剪貼板
  1. #id { color: red ！important }   
  2. .class { color: yellow !important }  

結(jié)果是第一個(gè)樣式優(yōu)先于第二個(gè)樣式。
IE6對(duì) !important 的支持并不完全，在IE6中，如果一個(gè)選擇器中先定義了 !important 屬性，后面又定義了一個(gè)同樣的不帶 !important 的屬性，那么!important 會(huì)失效。

CSS Code復(fù)制內(nèi)容到剪貼板
  1. div {   
  2.   color: yellow !important;     
  3.   color: red;   
  4. }  

在IE6中，可就沒(méi)辦法黃了，還是見(jiàn)點(diǎn)血吧！
IE6/7還可以在 !important 后面加點(diǎn)料，也不會(huì)失去味道，但是建議別這么無(wú)聊！

CSS Code復(fù)制內(nèi)容到剪貼板
  1. div {   
  2.   color: yellow !important you are dead;   /* IE6/7依然有效 */  
  3. }  

相關(guān)文章

最新評(píng)論