CSS 选择器的优先级

三位数

一个选择器的优先级可以说是由三个不同的值（或分量）相加，可以认为是百（ID）十（类）个（元素）——三位数的三个位数：

• ID：选择器中包含ID选择器则百位得一分。
• 类：选择器中包含类选择器、属性选择器或者伪类则十位得一分。
• 元素：选择器中包含元素、伪元素选择器则个位得一分。

备注

通用选择器（*）、组合符（+、>、~、' '空格）和调整优先级的选择器（:where()）不会影响优先级。

否定（:not()）和任意匹配（:is()）伪类本身对优先级没有影响，但它们的参数则会带来影响。参数中，对优先级算法有贡献的参数的优先级的最大值将作为该伪类选择器的优先级。

选择器

ID 选择器

百位得一分。

#my-id {
    color: green;
}

类选择器

十位得一分。

.my-class {
    color: green;
}

属性选择器

十位得一分。

.my-div[attr="value"] {
    color: green;
}

伪类 Pseudo-class

十位得一分。注意：伪类是一个:冒号。

.my-div:hover {
    color: red;
}

元素选择器

个位得一分。

div {
    color: red;
}

伪元素 Pseudo-element

个位得一分。注意：伪元素是两个::冒号。

.my-div::before {
    content: '你好';
}

示例

参考文档

层叠、优先级与继承