CSS中理解层叠性及权重如何分配
大家好，我是翼同学。今天笔记的内容是：
上述代码运行后，color属性应呈现哪个值？
很显然，答案是蓝色。
总的来说，相同级别的选择器选择设置同一样式时，会发生样式冲突，此时只有一个规则起作用，也就是最后一条样式生效。这就是CSS层叠性
但有时我们发现，实际情况并不是这样。看下面代码：
为什么上述代码运行后，标题呈现为红色？明明<h3>标签是在后面定义的，按照层叠性来讲，标题应该呈现出蓝色才是？
其实，这些都引出了CSS的另一大特性：优先性。
注意事项：
运行后，段落的颜色显示为绿色。
在上面这个例子中:
- CSS的三大特性，分别是层叠性、优先性和继承性
三大特性
层叠性
什么是层叠性？ 在CSS中，样式的设置顺序很重要。当相同选择器设置同一样式时，往往最后设置的样式才是实际应用的样式，这就是CSS的层叠性。 为了更好的理解这个概念，先来看这样一个问题：|
1
2
3
4
5
6 |
h3{
color:red;
}
h3{
color:blue;
}
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18 |
<!DOCTYPE html>
<html>
<head>
<style>
.nav {
color: red;
}
h3 {
color: blue;
}
</style>
</head>
<body>
<h3class="nav">
Hello world！
</h3>
</body>
</html>
|
优先性
选择器具有权重的概念，不同权重的选择器优先级不同。当发生样式冲突时（同一元素的属性被多次设置），浏览器会根据不同选择器的权重来判断哪些样式设定有效，这就是CSS的优先性。 就前面的例子而言，标签选择器h3 { }会选择页面中所有的<h3>标签，这并不是很具体。但是类选择器会选择页面中具有特定class属性的标签，这就稍微具体了些。所以，类选择器的权重会比标签选择器大一些，导致即使标签选择器在最后定义也无法实现特定效果。 总结： 当同一个元素被多个不同的选择器指定时，就会有优先级存在。根据选择器的权重来决定执行哪个样式。（关于权重，后面小节单独讲）继承性
继承性也是CSS中的一大特性。如何理解继承？ 举个例子，将一个元素的color值设置为红色，如果该元素的子元素没有设置color值，那么子元素会自动继承父元素的设定值，也就是红色。- 总的来说，继承就是一些在父元素上的样式设置，可以被子元素继承。
- 常见的可继承的属性：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权重最大，但是并不经常使用。
- 等级一到等级六，权重依次递减，并且注意到，继承是没有权重的。
- 不同选择器间设置同一属性，浏览器会根据选择器的权重大小来决定执行哪个样式
- 需要注意的是，复合选择器的使用会产生权重的叠加问题
|
1
2
3
4
5
6 |
h2p {
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
- 可以看到，权重相加后是不会出现进位的
