計算指定選擇器的優先順序: 重新認識css的權重
important
加1,0,0,0
id 選擇器 (如 #id)
加0,1,0,0
class 類選擇符(如 .class)、每個屬性選擇符(如 [attribute=])、每個偽類(如 :hover)
加0,0,1,0
元素選擇符(如p)或偽元素選擇符(如 :firstchild)等
加0,0,0,1
其它選擇符包括全域性選擇符*,不過這也是一種specificity。
加0,0,0,0,相當於沒加
比較同一級別的個數,數量多的優先順序高,如果相同即比較下一級別的個數。
至於各級別的優先順序,就是:
important > 內聯 > id > 類 > 標籤 | 偽類 | 屬性選擇 > 偽物件 > 繼承 > 萬用字元 萬用字元 > 繼承
這也就解釋了為什麼11個標籤的定義會比不上1個類的定義,1個類加11個標籤會比不上2個類的權重高
CSS 選擇器優先順序(權重)
請問div的背景顏色為紅色還是綠色呢?lang en charset utf 8 documenttitle divstyle head style background color green div body html 答案為綠色。為什麼會是綠色呢?難道存在 執行的先後的覆蓋問題?請看第二個問題...
18 選擇器權重(優先順序)
樣式的衝突 當我們通過不同的選擇器,選中相同的元素時,並且為相同的樣式設定不同的值時,此時就發生了樣式的衝突 發生樣式衝突時,應用哪個樣式由選擇器的權重 優先順序 決定 選擇器的權重 內聯樣式 1000 id選擇器 100 類和偽元素選擇器 10 元素選擇器 1 通配選擇器 0 繼承的樣式 沒有優先...
選擇器優先順序 CSS選擇器優先順序總結
css選擇器優先順序這個問題,相信有點經驗前端都會認為非常簡單,但是我們今天還是來總結一下吧。相信大家應該很少直接在html頁面寫樣式吧,一般都是用link標籤匯入css樣式表。使用者自定義樣式表就是我們用link標籤引入的css樣式表,為了保持不同瀏覽器下樣式相同,所以我們的自定義樣式表一般都會覆...