選擇器樣式覆蓋
<style type="text/css">
h1,span{color:red;}
.first,#second>span{color:blue;}
</style>
為什么設(shè)置了.first的樣式為藍(lán)色后，.first里面的子選擇器span仍舊是紅色呢？這兩個(gè)真正的樣式到底是怎樣一種規(guī)定？
kevine099
2016-04-07
4 回答
舉報(bào)
0/150
提交
取消
2016-04-07
回復(fù) kevine099：好吧我看錯(cuò)了，有一個(gè)名詞你得知道，叫做特殊性，相關(guān)內(nèi)容你可以看第九章的內(nèi)容或者看《CSS權(quán)威指南》的第三章。簡(jiǎn)單地說(shuō)，當(dāng)樣式選擇存在競(jìng)爭(zhēng)時(shí)，特殊性高的會(huì)勝出。
span{color:blue;}這里的樣式的特殊性為0,0,0,1 ? 而繼承值根本沒(méi)有特殊性（注意沒(méi)有特殊性比特殊性為0還要低）！！所以span從h1里繼承的樣式會(huì)被另外一個(gè)樣式干掉。
這樣說(shuō)可以么，我怕我說(shuō)的不夠簡(jiǎn)練
2016-04-07
我再舉一個(gè)簡(jiǎn)單的例子來(lái)說(shuō)明繼承父類的值的特殊性真的很低
<!DOCTYPE?html> <html> <head> <meta?charset="UTF-8"?/> <title>Document</title> <style?type="text/css"> body{ color:red; } </style> </head> <body> <p> aaaaaaaaaa<a?href="www.baidu.com">baidu</a>aaaaaaaaaa </p> </body> </html>這是一個(gè)很簡(jiǎn)單的例子，給body設(shè)置樣式color:red; ?但是效果是這樣的
在這里我并沒(méi)有對(duì)<a>標(biāo)簽進(jìn)行任何處理，為什么它還是變藍(lán)了，因?yàn)闉g覽器會(huì)默認(rèn)給<a>一個(gè)樣式
a:link{color:blue;}所以鏈接的顏色還是藍(lán)色并沒(méi)有變紅
2016-04-07
.first,#second>span{color:blue;}你這樣.first里面的子選擇器span當(dāng)然是紅色的，#second>span這個(gè)是選擇id為second元素的span子選擇器，id為second的只有第二段，當(dāng)然就第二段里的span是藍(lán)色的
.first,span{color:blue;}這樣所有的就是藍(lán)色的了
2016-04-07
.first,span{ color:green;}
#second span{ color:green;}