参考链接

深入理解CSS选择器优先级

CSS 选择器及权重

你必须懂的css样式权重和优先级

（部分案例可能有误，最好自己动手瞅瞅）

CSS选择器权重

同一元素的同一属性权重：

!important > 行内样式 > id 选择器 > （class 、属性、伪类选择器 ）> （标签、伪元素选择器 ）> 通配选择器

具体计算规则见下文。

注意，优先级比较的是相同元素的相同属性

1. 如果!important被用于一个简写的样式属性，那么这条简写的样式属性所代表的子属性都会被应用上!important。 例如：background: blue !important;
2. 如果两条样式都使用!important，则权重值高的优先级更高
3. 样式指向同一元素，权重规则生效，权重大的被应用
4. 样式指向同一元素，权重规则生效，权重相同时，就近原则生效，后面定义的被应用
5. 样式不指向同一元素时，权重规则失效，就近原则生效，离目标元素最近的样式被应用
6. 层次选择器不改变优先级

优先级是由 A 、B、C、D 的值来决定的，其中它们的值计算规则如下：

• 如果存在行内样式，那么 A = 1，否则 A = 0 ；
• B 的值等于 ID选择器（#id） 出现的次数；
• C 的值等于 类选择器（.class） 和 属性选择器（a[href^="https"]） 和 伪类（:first-child） 出现的总次数；
• D 的值等于 标签选择器（h1,a,div） 和 伪元素（::before,::after） 出现的总次数。

从左至右比较，如果是样式优先级相等，取后面出现的样式。

补充说明

其他的情况测试在上面的参考链接中大都有提到，这里不再赘述。

想专门补充和注意的是，伪元素和外层标签取到的不是同一个元素！

来看下面的例子

HTML

<div id="div1">
    123 <br>
    456
</div>

CSS

div::after{
    content: 'after';
    color: lawngreen;
}
div::first-line {
    color: deepskyblue;
}
#div1 {
    color: red;
}

不对啊，按照前面的规则，这里修改的都是同一个div 里面的 color 属性，按理说的 id 选择器应该是权重最大的，所有字体都应该是 红色 啊。

事实上，这里修改的确实都是 color 属性，但并不是都修改了同一个元素，我们来看下面的例子 。

HTML

<div id="div1">
    123 <br>
    456
</div>

CSS

div::after{
    content: 'after';
    background-color: greenyellow;
}
div::first-line {
    background-color: orange;
}
#div1 {
    color: red;
}
div {
    width: 80px;
    height: 80px;
    background-color: deepskyblue;
}

可以看到，伪元素取到的 **background** 和标签取到的 **background** 并不相同，因此，于是得到前面例子的结果就不奇怪了，因为压根操作就不是同一个元素。

可能有人会和我第一反应一样：那这伪类还怎么比较，这不是跳出规则了吗？

所以再补充个简单的例子。

HTML

<div id="div1">123</div>

CSS

#div1::after {
    color: red;
}
div::after{
    content: 'after';
    color: lawngreen;
}