CSS權重介紹

2021-09-27 03:32:39 字數 484 閱讀 4012

css權重指的是樣式的優先順序,有兩條或多條樣式作用於乙個元素,權重高的那條樣式對元素起作用,權重相同的,後寫的樣式會覆蓋前面寫的樣式。

可以把樣式的應用方式分為幾個等級,按照等級來計算權重

1、!important,加在樣式屬性值後,權重值為 10000

2、內聯樣式,如:style=」」,權重值為1000

3、id選擇器,如:#content,權重值為100

4、類,偽類和屬性選擇器,如: content、:hover 權重值為10

5、標籤選擇器和偽元素選擇器,如:div、p、:before 權重值為1

6、通用選擇器(*)、子選擇器(>)、相鄰選擇器(+)、同胞選擇器(~)、權重值為0

1、例項一:

......

這是乙個div元素

2、例項二:

......

css選擇器權重介紹

選擇器與偽元素的權重情況 高權重的選擇會覆蓋低權重的展示樣式 選擇器表示式或示例 說明權重 行內選擇器 style 1000 id選擇器 aaa 100類選擇器 aaa 10標籤選擇器 h1元素的tagname 1屬性選擇器 img alt div class pus 10相鄰選擇器 selecte...

CSS 權重問題

行內樣式包含在你的 html 標籤中 對你的元素產生直接作用,權重最大,但是不能宣告偽類樣式 test id 一般用來作為元素的唯一標識,權重第二 屬性選擇器 針對標籤中的屬性的選擇器 這個形容有點書面,具體自己理解 設定 input 標籤中 title 為 test 的標籤字型顏色 input t...

css權重比較

1 important,加在樣式屬性值後,權重值為 10000 2 內聯樣式,如 style 權重值為1000 3 id選擇器,如 content,權重值為100 4 類,偽類和屬性選擇器,如 content hover 權重值為10 5 標籤選擇器和偽元素選擇器,如 div p before 權重...