這篇文章主要介紹了css權重是怎么計算的,具有一定借鑒價值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。
css權重如何計算?
CSS權重是由四個數值決定,看一張圖比較好解釋:
圖里是英文的,我翻譯過來分別說一下,4個等級的定義如下:
第一等:內聯樣式,如:,權值為1000.(該方法會造成css難以管理,所以不推薦使用)
第二等:ID選擇器,如:#header,權值為0100.
第三等:類、偽類、屬性選擇器如:.bar,權值為0010.
第四等:標簽、偽元素選擇器,如:div::first-line權值為0001.
最后把這些值加起來,再就是當前元素的權重了。
其他:
無條件優先的屬性只需要在屬性后面使用!important。它會覆蓋頁面內任何位置定義的元素樣式。(ie6支持上有些bug)。
通配符,子選擇器,相鄰選擇器等。如*,>,+,權值為0000.
繼承的樣式沒有權值。
CSS權重計算方式
計算選擇符中的ID選擇器的數量(=a)
計算選擇符中類、屬性和偽類選擇器的數量(=b)
計算選擇符中標簽和偽元素選擇器的數量(=c)
忽略全局選擇器
在分別計算a、b、c的值后,按順序連接abc三個數字組成一個新的數字,改值即為所計算的選擇符的權重。如果兩個選擇符的計算權重值相同,則采取“就近原則”。
示例:
div#app.child[name="appName"]/a=1,b=2,c=1—>權重=1+100+10+10=121/
實際中,最后到底加載的是那一條樣式,是一個相對復雜的問題,就簡單而言就與引入順序有關。本文只是最基礎的那部分。
感謝你能夠認真閱讀完這篇文章,希望小編分享的“css權重是怎么計算的”這篇文章對大家有幫助,同時也希望大家多多支持億速云,關注億速云行業資訊頻道,更多相關知識等著你來學習!
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。