CSS選擇器優(yōu)先級詳細(xì)介紹

1.類的覆蓋順序和應(yīng)用的時候引用的順序沒關(guān)系，覆蓋順序取決于類定義的順序

例如：

.a{ 
 color:red 
} 
.b{ 
 color:green 
} 

由于b晚于a定義，所以b覆蓋a，反之則a覆蓋b

2.類選擇器優(yōu)先級大于標(biāo)簽選擇器

例如：

div{ 
 color:red 
} 
.div{ 
 color:green 
} 

.div將覆蓋div

3.類選擇器優(yōu)先級等于純屬性選擇器，誰后定義誰優(yōu)先級高。

例如：

[data-name='div']{ 
 color: red 
 } 
 .a{ 
 color:blue 
 } 

.a將覆蓋[data-name='div']，反之[data-name='div']覆蓋.a

4.類選擇器優(yōu)先級小于標(biāo)簽+屬性組合選擇器。

例如：

div[data-name='div']{ 
 color: red 
 } 
 .a{ 
 color:blue 
 } 

5.類選擇器優(yōu)先級小于id選擇器。

例如：

.a{ 
 color:blue 
 } 
 #div{ 
 color: red 
 } 

.a將被#div覆蓋

6.標(biāo)簽+屬性組合選擇器優(yōu)先級小于id選擇器。

例如：

[data-name='div']{ 
 color:blue 
 } 
 #div{ 
 color: red 
} 

#div將會覆蓋[data-name='div']

7.標(biāo)簽選擇器優(yōu)先級小于id選擇器。

例如：

div{ 
 color:blue 
 } 
 #div{ 
 color: red 
 } 

#div將會覆蓋div

8.標(biāo)簽選擇器優(yōu)先級小于純屬性選擇器。

例如：

div{ 
 color:blue 
 } 
[data-name='div']{ 
 color: red 
 } 

div將會被 [data-name='div']覆蓋

綜上所述： 標(biāo)簽選擇器<類選擇器=純屬性選擇器（先定義會被覆蓋）<標(biāo)簽+屬性組合選擇器

更多選擇器的資料大家可以查看css手冊中的css選擇器章節(jié)

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com