選擇器樣式覆蓋
<style type="text/css">
h1,span{color:red;}
.first,#second>span{color:blue;}
</style>
為什么設置了.first的樣式為藍色后，.first里面的子選擇器span仍舊是紅色呢？這兩個真正的樣式到底是怎樣一種規定？
kevine099
2016-04-07
4 回答
舉報
0/150
提交
取消
2016-04-07
回復 kevine099：好吧我看錯了，有一個名詞你得知道，叫做特殊性，相關內容你可以看第九章的內容或者看《CSS權威指南》的第三章。簡單地說，當樣式選擇存在競爭時，特殊性高的會勝出。
span{color:blue;}這里的樣式的特殊性為0,0,0,1 ? 而繼承值根本沒有特殊性（注意沒有特殊性比特殊性為0還要低）??！所以span從h1里繼承的樣式會被另外一個樣式干掉。
這樣說可以么，我怕我說的不夠簡練
2016-04-07
我再舉一個簡單的例子來說明繼承父類的值的特殊性真的很低
<!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>這是一個很簡單的例子，給body設置樣式color:red; ?但是效果是這樣的
在這里我并沒有對<a>標簽進行任何處理，為什么它還是變藍了，因為瀏覽器會默認給<a>一個樣式
a:link{color:blue;}所以鏈接的顏色還是藍色并沒有變紅
2016-04-07
.first,#second>span{color:blue;}你這樣.first里面的子選擇器span當然是紅色的，#second>span這個是選擇id為second元素的span子選擇器，id為second的只有第二段，當然就第二段里的span是藍色的
.first,span{color:blue;}這樣所有的就是藍色的了
2016-04-07
.first,span{ color:green;}
#second span{ color:green;}