css层叠性 继承重要 |scss与css

首先，CSS样式表中的规则是按照先后顺序进行解析和应用的，后定义的规则会覆盖先定义的规则。具体来说，如果一个元素有多个样式定义，那么属性值将来自不同的样式规则。如下例子：

p {
color: red;
}
p {
color: blue;
}

这时候，所有的p元素都会被设置成蓝色。因为后一个规则覆盖了前一个规则。

其次，CSS规则有一个权重值，就是大家耳熟能详的“优先级”。优先级就是指不同的选择器有不同的权重值，权重比较高的规则将永远取得最终优先权。权重可以通过不同选择器的特性和使用方式进行计算。其中，ID选择器的权重最高，类选择器和属性选择器权重相同，标签选择器的权重最低。如下表：

ID选择器: 优先级为100
类选择器、属性选择器、伪类选择器: 优先级为10
标签选择器、伪元素选择器: 优先级为1

最后，CSS中还有一种特性叫做继承。继承就是指CSS某些属性会沿着元素的层级结构向下传递。也就是说，如果某个父元素的某个属性被设置了某个值，那么子元素就会继承这个值。但是，不是所有的属性都可以继承。通常继承的属性有：font-size、color、line-height和text-align等。如下例子：

body {
font-size: 14px;
color: black;
}
p {
/* 继承自body元素 */
font-size: inherit;
/* 不继承自body元素 */
color: blue;
}

总结：层叠性、继承和优先级是大家日常开发中必须要理解的基础知识。只有深入掌握这些概念并合理运用，才能更好地写出高效、优雅的CSS代码。