CSS中理解层叠性及权重如何分配

大家好，我是翼同学。今天笔记的内容是：

• CSS的三大特性，分别是层叠性、优先性和继承性

三大特性

层叠性

什么是层叠性？

在CSS中，样式的设置顺序很重要。当相同选择器设置同一样式时，往往最后设置的样式才是实际应用的样式，这就是CSS的层叠性。

为了更好的理解这个概念，先来看这样一个问题：

上述代码运行后，color属性应呈现哪个值？

很显然，答案是蓝色。

总的来说，相同级别的选择器选择设置同一样式时，会发生样式冲突，此时只有一个规则起作用，也就是最后一条样式生效。这就是CSS层叠性

但有时我们发现，实际情况并不是这样。看下面代码：

为什么上述代码运行后，标题呈现为红色？明明<h3>标签是在后面定义的，按照层叠性来讲，标题应该呈现出蓝色才是？

其实，这些都引出了CSS的另一大特性：优先性。

优先性

选择器具有权重的概念，不同权重的选择器优先级不同。当发生样式冲突时（同一元素的属性被多次设置），浏览器会根据不同选择器的权重来判断哪些样式设定有效，这就是CSS的优先性。

就前面的例子而言，标签选择器h3 { }会选择页面中所有的<h3>标签，这并不是很具体。但是类选择器会选择页面中具有特定class属性的标签，这就稍微具体了些。所以，类选择器的权重会比标签选择器大一些，导致即使标签选择器在最后定义也无法实现特定效果。

总结：

当同一个元素被多个不同的选择器指定时，就会有优先级存在。根据选择器的权重来决定执行哪个样式。（关于权重，后面小节单独讲）

继承性

继承性也是CSS中的一大特性。如何理解继承？

举个例子，将一个元素的color值设置为红色，如果该元素的子元素没有设置color值，那么子元素会自动继承父元素的设定值，也就是红色。

• 总的来说，继承就是一些在父元素上的样式设置，可以被子元素继承。

注意，只是一部分属性可以被继承，例如：颜色color属性。也有无法被继承的属性，比如width。

小结：

• 常见的可继承的属性：color属性、font属性、text属性
• 常见的不可继承的属性：width、height、border、margin、padding

权重

当不同选择器定义同一属性时，浏览器该选择执行哪一个？前文讲过，这种情况叫做样式冲突，当发生样式冲突时，会有优先级的指向。由于不同选择器的权重不同，使得样式冲突的解决成为可能。那么到底选择器的权重有哪些呢？

具体优先级看下表：

注意事项：

• !important是用于指定样式规则的最大优先权
• 但注意，虽然!important权重最大，但是并不经常使用。
• 等级一到等级六，权重依次递减，并且注意到，继承是没有权重的。
• 不同选择器间设置同一属性，浏览器会根据选择器的权重大小来决定执行哪个样式
• 需要注意的是，复合选择器的使用会产生权重的叠加问题

权重叠加时，如何计算叠加权重？

具体来说，就是相同位上的值互相叠加，但不会产生进位。

举个例子：

运行后，段落的颜色显示为绿色。

在上面这个例子中:

• 后代选择器 h2 p { } 权重为0,0,0,1 + 0,0,0,1 = 0,0,0,2
• 后代选择器.nav p { }权重为0,0,1,1 + 0,0,0,1 = 0,0,1,1
• 可以看到，权重相加后是不会出现进位的

最后，总结如下：

权重值一共有四位数值，判断权重大小的方法是从左往右，判断位上数值的大小，如果某一位的数值相同，则判断下一位数值。