【CSS】层叠继承规则

层叠规则

层叠规则按优先级（从高到低）排序为：

1. 重要性
2. 专用性
3. 源代码次序

重要性

优先级最高：!important。

但是这个语法，能不使用尽量不使用。

.example {
    color: red !important;
}

专用性

• 来源权重：内联样式(1000)（inline style） > 内部样式表（internal stylesheet） > 外部样式表（external stylesheet） > 浏览器默认样式。
• 特殊性（Specificity） ：样式表达式中的选择器越具体，其优先级越高。例如，ID 选择器(100)优先级高于类选择器(10)和属性选择器(10)，类选择器(10)和属性选择器(10)优先级高于标签选择器(1)或者伪元素选择器(1)。

注：通用选择器（*）、复合选择器(+, >, -, 空格)、否定选择器(:not)无影响。

源代码次序

如果多个选择器具有相同的重要性和专用性，则用源代码次序进行判断。

• 顺序：后定义的样式将覆盖先定义的样式，如果具有相同的特殊性和权重。

继承规则

在 CSS 中，一些属性具有继承性，这意味着它们的值会从父元素传递到子元素，从而影响子元素的样式。常见的继承属性包括：

• 字体相关属性：font-family、font-size、font-weight、font-style、line-height 等；
• 文本相关属性：color、text-align、text-decoration 等；
• 元素可见性属性：visibility；
• 元素盒模型属性：margin、padding 等。

css 处理继承提供四种特殊的通用属性值：

• inherit：（继承父元素，常用）该值将应用到旋顶元素的属性值设置为和父元素一样。
• initial：（浏览器默认样式，常用）该值应用到选定元素的属性值设置为和浏览器默认样式表中该元素设置的值一样。如果浏览器默认样式表中没有设置值，并且该属性是自然继承的，那么该属性值就被设置为 inherit。
• unset：将属性重置为其自然值，就是说如果自然继承的，就是inherit，否则就是 initial。
• revert： 如果当前节点没有任何样式，则将该属性恢复到他所拥有的值（默认值），如果有设置则为用户代理的默认样式。

initial 和 unset 不支持 ie。

就近原则

属性值会继承自己最近的那个祖先元素的属性。