携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第7天，点击查看活动详情
1️⃣前言
大家好，我是翼同学。今天笔记的内容是：
- CSS的三大特性，分别是层叠性、优先性和继承性以及不同选择器间的权重的叠加与优先级
2️⃣三大特性
层叠性
什么是层叠性？
在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
3️⃣权重
当不同选择器定义同一属性时，浏览器该选择执行哪一个？前文讲过，这种情况叫做样式冲突，当发生样式冲突时，会有优先级的指向。由于不同选择器的权重不同，使得样式冲突的解决成为可能。那么到底选择器的权重有哪些呢？
具体优先级看下表：
| 等级 | 定义 | 权重 |
|---|---|---|
| 一 | !important | 最大 |
| 二 | 行内样式style=" " | 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 - 可以看到，权重相加后是不会出现进位的
最后，总结如下：
权重值一共有四位数值，判断权重大小的方法是从左往右，判断位上数值的大小，如果某一位的数值相同，则判断下一位数值。
4️⃣写在最后
好了，今天的笔记就记到这里。
