【CSS】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） 出现的总次数。

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

补充说明

其他的情况测试在上面的参考