CSS3 选择器优先级（七）

CSS3 选择器优先级（七）

标签（空格分隔）： 前端学习

---

层叠
css规则的顺序很重要，当应用两条同级别的规则到一个元素的时候，写在后面的就是实际使用的规则。
例如：

h1 { 
    color: red; 
}
h1 { 
    color: blue; 
}
<h1>最后显示蓝色</h1>

优先级
浏览器是根据优先级来决定当多个规则有不同选择器对应相同的元素时需要使用哪个规则。

• 元素选择器，会选择页面上该类型的所有元素，优先级低
• 类选择器，会选择该页面中有特定class属性值的元素，优先级要高一点

继承
类似于'font color' 'color'这些是可以继承的，'border' 'padding'等是不可以继承的，这些一般是常规经验

控制继承

• inherit：设置该属性会使子元素属性和父元素相同，实际上就是“开启继承”
• initial：设置属性值和浏览器默认样式相同，如果浏览器默认样式中未设置且该属性是自然继承的，那么会设置为inherit
• unset将属性重置为自然值，也就是自然继承那么就是inherit，否则就和initial一样
• revert很少有浏览器支持

重设所有属性值
all属性可以用于同时将这些继承值中的一个应用于（几乎）所有属性
例如：

.fix-this { all: unset; }

理解层叠
当不止一个元素的时候如何应用css规则
有三个因素需要考虑，依据重要性排序如下，前面的更重要：

1. 重要程度
2. 优先级
3. 资源顺序

1.资源顺序：后定义的规则会被执行例如层叠中举的例子。

2.优先级：类选择器大于元素选择器但是优先级高的选择器中未定义的规则不会覆盖优先级低的选择器中已定义的规则。
一个选择器的优先级可以说由四个部分相加（分量），可以认为是个十百千四位数的四个位数：

1. 千位：如果声明在style的属性（内联样式）则该位得一分，这样的声明没有选择器，所有它的总分是1000
2. 百位：选择器中包含ID选择器则该位得一分
3. 十位：选择器中包含类选择器、属性选择器或伪类选择器则该位得一分
4. 个位：选择器中包含元素、伪元素选择器则该位得一分

要注意的是通用选择器(*),组合符(+,>,~,’’),和否定伪类(:not)不会影响优先级

还要注意的是，在进位运算时不允许进位，20个类选择器仅仅意味着20个十位，而不能视为两个百位，也就是说，无论多少个类选择器的权重叠加，都不会超过一个ID选择器。

!important
使用!important后即使优先级低也会使用!important定义的值，!important改变了层叠的常规工作方式，它会使调试CSS问题非常困难。

CSS位置的影响
相互冲突的声明将按一下顺序适用，后一种声明将覆盖前一种声明：

1. 用户代理样式表中的声明（例如，浏览器的默认样式，在没有设置其他样式时使用）
2. 用户样式表中的常规声明（由用户设置的自定义样式）
3. 作者样式表中的常规声明（这些是我们Web开发人员设置的样式）
4. 作者样式表中的!important声明
5. 用户样式表中的!important声明