本文為大家分享的是CSS選擇器優(yōu)先級(jí)相關(guān)資料介紹,供大家參考,具體內(nèi)容如下
1.類的覆蓋順序和應(yīng)用的時(shí)候引用的順序沒關(guān)系,覆蓋順序取決于類定義的順序
例如:
CSS Code復(fù)制內(nèi)容到剪貼板
.a{
color:red
}
.b{
color:green
}
由于b晚于a定義,所以b覆蓋a,反之則a覆蓋b
2.類選擇器優(yōu)先級(jí)大于標(biāo)簽選擇器
例如:
CSS Code復(fù)制內(nèi)容到剪貼板
div{
color:red
}
.div{
color:green
}
.div將覆蓋div
3.類選擇器優(yōu)先級(jí)等于純屬性選擇器,誰后定義誰優(yōu)先級(jí)高,例如:
CSS Code復(fù)制內(nèi)容到剪貼板
[data-name=’div’]{
color: red
}
.a{
color:blue
}
.a將覆蓋[data-name=’div’],反之[data-name=’div’]覆蓋.a
4.類選擇器優(yōu)先級(jí)小于標(biāo)簽+屬性組合選擇器,例如:
CSS Code復(fù)制內(nèi)容到剪貼板
div[data-name=’div’]{
color: red
}
.a{
color:blue
}
.a將被div[data-name=’div’]覆蓋
5.類選擇器優(yōu)先級(jí)小于id選擇器,例如:
CSS Code復(fù)制內(nèi)容到剪貼板
.a{
color:blue
}
#div{
color: red
}
.a將被#div覆蓋
6.標(biāo)簽+屬性組合選擇器優(yōu)先級(jí)小于id選擇器,例如:
CSS Code復(fù)制內(nèi)容到剪貼板
[data-name=’div’]{
color:blue
}
#div{
color: red
}
#div將會(huì)覆蓋[data-name=’div’]
7.標(biāo)簽選擇器優(yōu)先級(jí)小于id選擇器,例如:
CSS Code復(fù)制內(nèi)容到剪貼板
div{
color:blue
}
#div{
color: red
}
新聞熱點(diǎn)
疑難解答
圖片精選