【CSS】怎么理解层叠性、继承性和优先性？选择器的权重如何叠加？
1、前言
大家好，我是翼同学。今天笔记的内容是：
CSS 的三大特性，分别是层叠性、优先性和继承性以及不同选择器间的权重的叠加与优先级
2、三大特性
2.1、层叠性
什么是层叠性？
在 CSS 中，样式的设置顺序很重要。当相同选择器设置同一样式时，往往最后设置的样式才是实际应用的样式，这就是 CSS 的层叠性。
为了更好的理解这个概念，先来看这样一个问题：
上述代码运行后，color属性应呈现哪个值？
很显然，答案是蓝色。
因此我们说，相同级别的选择器选择设置同一样式时，会发生样式冲突，此时只有一个规则起作用，也就是最后一条样式生效。这就是 CSS 层叠性
不过，有时候我们会发现，实际情况并不是这样。看下面代码：
为什么上述代码运行后，标题呈现为红色？明明<h3>标签是在后面定义的，按照层叠性来讲，标题应该呈现出蓝色才是？
这就引出了 CSS 的另一大特性：优先性。
2.2、优先性
选择器具有权重的概念（后面单独讲），不同选择器的优先级是不同的。当发生样式冲突时（同一元素的属性被多次设置），浏览器会根据不同选择器的权重来判断哪些样式设定有效，这就是 CSS 的优先性。
就前面的例子而言，标签选择器h3 { } 会选择页面中所有的<h3>标签，这似乎并不是很具体。而类选择器会选择页面中具有特定class属性的标签，这就稍微具体了些。从概念上讲，类选择器的权重会比标签选择器大，因此即使标签选择器在最后定义，也无法实现其样式效果。
总结：
当同一个元素被多个不同的选择器指定时，就会有优先级存在。浏览器会根据选择器的权重来决定执行哪个样式。
2.3、继承性
继承性也是 CSS 中的一大特性。如何理解继承？
举个例子，将一个元素的color值设置为红色，如果该元素的子元素没有设置color值，那么子元素会自动继承父元素的设定值，也就是红色。
总的来说，继承就是一些在父元素上的样式设置，可以被子元素继承。
注意，只是一部分属性可以被继承，例如：颜色color属性。也有无法被继承的属性，比如width。
小结：
常见的可继承的属性：
color、font、text常见的不可继承的属性：
width、height、border、margin、padding
3、权重
当不同选择器定义同一属性时，浏览器该选择执行哪一个？前文讲过，这种情况叫做样式冲突，当发生样式冲突时，会有优先级的指向。由于不同选择器的权重不同，使得样式冲突的解决成为可能。那么到底选择器的权重有哪些呢？
具体优先级看下表：
!important:
权重最大行内样式
style=" "1, 0, 0, 0ID 选择器：
0, 1, 0, 0类、伪类选择器、属性选择器：
0, 0, 1, 0标签选择器：
0, 0, 0, 1通配符选择器
*：0, 0, 0, 0继承：
没有权重
注意事项：
等级一到等级六，权重依次递减，并且注意到，继承是没有权重的。
!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可以看到，权重相加后是不会出现进位的
最后，总结如下：
权重值一共有四位数值，判断权重大小的方法是从左往右，判断位上数值的大小，如果某一位的数值相同，则判断下一位数值。
4、写在最后
好了，今天的笔记就记到这里。
版权声明: 本文为 InfoQ 作者【翼同学】的原创文章。
原文链接:【http://xie.infoq.cn/article/51740cdf1482ef4cfdb383417】。文章转载请联系作者。
知行合一 2022.08.02 加入
@珠海科技学院
评论