CSS選擇器權重計算規則

一、CSS選擇器類型包括：

1. ID #id

2. class .class

3. 標籤 p

4. 通用 *

5. 屬性 [type="text"]

6. 偽類 :link

7. 偽元素 ::after

8. 子選擇器 相臨選擇器

二、權重計算規則

1.第一等，代表內聯樣式規則 如：stylex=""，權值為：1000；

2.第二等，代表ID選擇器 如：#box，權值為：0100；

3.第三等，代表類，偽類，屬性選擇器 如：.box，權值為：0010；

4.第四等，代表元素和偽元素選擇器 如：div ，權值為：0001；

5.通配符，子元素，相鄰元素選擇器 如：* ,> ，權值為：0000；

6.繼承的樣式沒有權值。

比較規則：

1.從左往右依次比較，前一等級相等才能往後比。

2.權重相同的情況下，後面的樣式會覆蓋掉前面的樣式。

3.！important的優先順序最高。

如下：

a{color: yellow;} /*特殊性值：0,0,0,1*/

div a{color: green;} /*特殊性值：0,0,0,2*/

.demo a{color: black;} /*特殊性值：0,0,1,1*/

.demo input[type="text"]{color: blue;} /*特殊性值：0,0,2,1*/

.demo *[type="text"]{color: grey;} /*特殊性值：0,0,2,0*/

#demo a{color: orange;} /*特殊性值：0,1,0,1*/

div #demo a{color: red;} /*特殊性值：0,1,0,2*/

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！