學習筆記 CSS優先順序規則

2022-04-03 17:28:05 字數 1212 閱讀 7627

css的優先順序規則很多地方的說法都是錯誤的,常見錯誤說法是inline css>內部樣式》外部樣式,其實並沒有這種規定。真正的css優先順序確定是通過特性值大小確定的,在特性值大小相同的情況下,哪個樣式出現在最後採用哪個樣式。

在大型複雜系統或css樣式太多的情況下,同乙個元素可能有多個css樣式能夠指定,但最終只有一種樣式能夠真正使用,這時我們就需要通過特性值大小來確定採用何種樣式了。(注:css樣式書寫推薦使用層級巢狀,明確的層級巢狀能夠更好得給我們希望的元素設定樣式,預防出現奇怪的樣式衝突問題)。

真正的優先順序規則是指:!important> inline css > id選擇器 > class選擇器 > tag選擇器,假設我們給定 inline css 權重為a,id選擇器權重為b,class選擇器權重為c,tag選擇器權重為d。那麼存在a>b>c>d這種關係,且n個b(c,d)無論怎麼加永遠小於a(b,c)的權重。(有意思的是有些選擇器(firefox 52.0.2 (64 位)、ie11等)認為class選擇器的數量大於255時會超過id選擇器,不過這種情況通常不存在,沒人寫那麼多選擇器)。在判定乙個元素使用哪乙個樣式時(不包含inline css且沒有!important的情況下),先比較多個樣式中a權重的多少,如果一樣再比較b,直到比較到d為止,如果abcd都一樣,使用最後引用的那個樣式。(我們通常說內部樣式》外部樣式通常是因為內部樣式引用順序在外部樣式引用順序之後,其實這兩種方式根本就沒有優先順序關係,只有先後關係)。(還有一點,真正上我們並不區分內部樣式和外部樣式,硬要區分的話才做劃分)。

有個先後順序確定優先順序的比較好的例子:我們知道a標籤有四種狀態:鏈結訪問前、鏈結訪問後、滑鼠滑過、啟用,分別對應四種偽類:link、:visited、:hover、:active,並且這四個偽類如果對同乙個元素設定同乙個屬性,那它們的宣告順序還有一定要求,一般大家都遵循「lvha」(愛恨原則love hate)。根據css優先順序計算規則,偽類的特殊性值是c,4個偽類的特殊性值相同,那麼後面宣告的規則優先順序高。當滑鼠滑過a鏈結時,滿足:link和:hover兩個偽類,要改變a標籤的顏色,就必須將:hover偽類在:link偽類後面宣告;同理,當滑鼠點選啟用a鏈結時,同時滿足:link、:hover、:active三種狀態,要顯示a標籤啟用時的樣式(:active),必須將:active宣告放到:link和:hover之後。因此得出lvha這個順序。這個順序能不能變?可以,但也只有:link和:visited可以交換位置,因為乙個鏈結要麼訪問過要麼沒訪問過,不可能同時滿足,也就不存在覆蓋的問題。

CSS 優先順序規則

優先順序是瀏覽器是通過判斷哪些屬性值與元素最相關以決定並應用到該元素上的。優先順序僅由選擇器組成的匹配規則決定的。優先順序就是分配給指定的css宣告的乙個權重,它由匹配的選擇器中的每一種選擇器型別的數值決定。下列是乙份優先順序逐級增加的選擇器列表 當 important規則被應用在乙個樣式宣告中時,...

CSS學習筆記 優先順序

乙個規則的優先順序按如下規則計算 examples a 0 b 0 c 0 specificity 0 li a 0 b 0 c 1 specificity 1 ulli a 0 b 0 c 2 specificity 2 ulol li a 0 b 0 c 3 specificity 3 h1 r...

CSS優先順序計算規則

css的優先順序可以分為引入優先順序和宣告優先順序 css按照引入方式的不同可以分為 內聯樣式 外部樣式和內部樣式 內聯樣式 直接寫在html標籤內部的css樣式 外部樣式 使用link引入的外部css樣式 內部樣式 在style標籤內部書寫的css樣式 優先順序為 內聯樣式 外部樣式 內部樣式 c...