CSS中理解层叠性及权重如何分配
翼同学
前言
大家好，我是翼同学。今天笔记的内容是：
- CSS的三大特性，分别是层叠性、优先性和继承性
三大特性
☀️层叠性
什么是层叠性？
在CSS中，样式的设置顺序很重要。当相同选择器设置同一样式时，往往最后设置的样式才是实际应用的样式，这就是CSS的层叠性。
为了更好的理解这个概念，先来看这样一个问题：
h3 {
color: red;
}
h3 {
color: blue;
}
上述代码运行后，color属性应呈现哪个值？
很显然，答案是蓝色。
总的来说，相同级别的选择器选择设置同一样式时，会发生样式冲突，此时只有一个规则起作用，也就是最后一条样式生效。这就是CSS层叠性
但有时我们发现，实际情况并不是这样。看下面代码：
<!DOCTYPE html>
<html>
<head>
<style>
.nav {
color: red;
}
h3 {
color: blue;
}
</style>
</head>
<body>
<h3 class="nav">
Hello world！
</h3>
</body>
</html>
为什么上述代码运行后，标题呈现为红色？明明<h3>标签是在后面定义的，按照层叠性来讲，标题应该呈现出蓝色才是？
其实，这些都引出了CSS的另一大特性：优先性。
✔️优先性
选择器具有权重的概念，不同权重的选择器优先级不同。当发生样式冲突时（同一元素的属性被多次设置），浏览器会根据不同选择器的权重来判断哪些样式设定有效，这就是CSS的优先性。
就前面的例子而言，标签选择器h3 { } 会选择页面中所有的<h3>标签，这并不是很具体。但是类选择器会选择页面中具有特定class属性的标签，这就稍微具体了些。所以，类选择器的权重会比标签选择器大一些，导致即使标签选择器在最后定义也无法实现特定效果。
总结：
当同一个元素被多个不同的选择器指定时，就会有优先级存在。根据选择器的权重来决定执行哪个样式。（关于权重，后面小节单独讲）
🌳继承性
继承性也是CSS中的一大特性。如何理解继承？
举个例子，将一个元素的color值设置为红色，如果该元素的子元素没有设置color值，那么子元素会自动继承父元素的设定值，也就是红色。
- 总的来说，继承就是一些在父元素上的样式设置，可以被子元素继承。
注意，只是一部分属性可以被继承，例如：颜色color属性。也有无法被继承的属性，比如width。
小结：
- 常见的可继承的属性：
color属性、font属性、text属性 - 常见的不可继承的属性：
width、height、border、margin、padding
权重
当不同选择器定义同一属性时，浏览器该选择执行哪一个？前文讲过，这种情况叫做样式冲突，当发生样式冲突时，会有优先级的指向。由于不同选择器的权重不同，使得样式冲突的解决成为可能。那么到底选择器的权重有哪些呢？
具体优先级看下表：
| 等级 | 定义 | 权重 |
|---|---|---|
| 一 | !important | 最大 |
| 二 | 行内样式 | 1, 0, 0, 0 |
| 三 | ID选择器 | 0, 1, 0, 0 |
| 四 | 类、伪类选择器、属性选择器 | 0, 0, 1, 0 |
| 五 | 标签选择器 | 0, 0, 0, 1 |
| 六 | 通配符选择器* |
0, 0, 0, 0 |
| 七 | 继承 | 没有权重 |
注意事项：
- !important是用于指定样式规则的最大优先权
- 但注意，虽然!important权重最大，但是并不经常使用。
- 等级一到等级六，权重依次递减，并且注意到，继承是没有权重的。
- 不同选择器间设置同一属性，浏览器会根据选择器的权重大小来决定执行哪个样式
- 需要注意的是，复合选择器的使用会产生权重的叠加问题
权重叠加时，如何计算叠加权重？
具体来说，就是相同位上的值互相叠加，但不会产生进位。
举个例子：
h2 p {
color: red;
}
.nav p {
color: green;
}
运行后，段落的颜色显示为绿色。
在上面这个例子中:
- 后代选择器
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 - 可以看到，权重相加后是不会出现进位的
最后，总结如下：
权重值一共有四位数值，判断权重大小的方法是从左往右，判断位上数值的大小，如果某一位的数值相同，则判断下一位数值。
到此这篇关于CSS中理解层叠性及权重如何分配的文章就介绍到这了,更多相关css层叠性权重内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！