前端學習系列——(八)CSS樣式優先順序
不知道你有沒有遇到這樣一種情況,語法正確、單詞正確,但是樣式就是無法應用,而是使用的不知道在哪寫過的一個樣式,然後你就偷懶使用!important讓樣式生效。哈哈哈,反正我遇到過,而且這麼做了。
其實這個問題的出現,是因為樣式存在優先順序規則。如果瞭解了樣式的優先順序,就可以避免寫出無法複用的樣式,同時可以快速定位樣式衝突無法應用的問題的根源。
一、樣式優先順序規則:
1.根據權重值排序,應用權重值第一的樣式
2.如果權重值相同,則應用最後定義的樣式(應避免這種情況,若出現問題,溯源的時候比較麻煩)
二、權重規則:
權重分為四個等級(有一個重要級角色不在此列)
第一等:內聯樣式,權重1000,即標籤內的style屬性設定的樣式
第二等:ID選擇器,權重100,例如#id{...}
第三等:類選擇器,偽類選擇器,屬性選擇器,權重10,例如.class{...}、:hover{...}、[arrtibute=value]
第四等:標籤選擇器,偽元素選擇器,權重1,例如div{...}、::after{...}
超然地位:!important(只要我出現,不好意思,權重就是無限,優先考慮,別的靠邊站)
PS:還有幾個權重為0,不計入排名,他們就是通配選擇器(*),子選擇器(>),相鄰同胞選擇器(+)
根據樣式根據以上規則,按照選擇器累加計算權重,例如
#my-id .my-class div p{...}
對於p標籤的來說,這個樣式的權重就是100+10+1+1=112,如果p還有別的樣式,只要小於(嚴格小於)112,就使用這個樣式,別的樣式無效。
三、舉個栗子
猜猜下面這組樣式設計 ,最後<p>標籤的文字顏色是什麼嗎?
CSS樣式如下:
.my-class div div p{ color:green; } .my-class #my-id div p{ color:red; } div #my-id div p{ color:gary; } div p{ color:blue; } p{ color:yellow; }
HTML結構如下:
<body>
<div class="my-class">
<div id="my-id">
<div>
<p>猜猜我是什麼顏色?</p>
</div>
</div>
</div>
</body>
答案揭曉,是紅色!!!!為什麼呢?
因為按照上面權重規則計算權重
第一組:10+1+1+1=13
第二組:10+100+1+1=112
第三組:1+100+1+1=103
第四組:1+1=2
第五組:1
不難看出第二組權重112,最高,所以最後顯示的顏色為紅色。