一、层叠性
说明：什么是层叠性，层叠性就是相同选择器设置相同的样式，此时一个样式就会覆盖另一个冲突的样式，让我们用案例来说明一下。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
div {
color: red;
}
div {
color: blue;
}
</style>
</head>
<body>
<div>测试案例</div>
</body>
</html>
我们看效果，此时的文字颜色是蓝色而不是红色，我们再看浏览器中的调试器
红色颜色的属性打了一个删除线，这就说明第一个样式已经被覆盖。
总结一下：
- 层叠性主要解决样式冲突的问题
- 样式冲突，遵循的原则就是就近原则，哪个样式离结构近，就执行哪个样式
- 样式不冲突，则不会层叠
二、继承性
说明：继承性就是子标签会继承父标签的某些样式，如文字颜色和字号。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
div {
color: red;
}
</style>
</head>
<body>
<div>
<p>测试文字</p>
</div>
</body>
</html>
请看代码，我并没有给p标签的文字设置颜色，只是给他的父标签设置了颜色，这就是css的继承性，让我再看浏览器中的调试器。
总结一下：
- 子元素可以继承父元素的样式（text-，font-，line-这些元素开头的都可以继承，以及color属性）
- 恰当的使用继承可以简化代码，降低css样式的复杂性
三、优先级
说明：当同一个元素指定多个选择器，就会有优先级的产生。选择器不同的按优先级执行，按优先级执行就会有一个权重的概念，说白了就是哪个选择器优先级高，我们先看下面的表，这就是各个选择器的优先级。值越大的优先级就越高。
选择器权重表：
| 选择器 | 选择器权重 |
|---|---|
| 继承，* | 0000 |
| 元素（标签）选择器 | 0001 |
| 类选择器，伪类选择器 | 0010 |
| ID选择器 | 0100 |
| 行内样式 | 1000 |
| ！important | 无穷大 |
接下来我们看一个案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.test {
color: blue;
}
div {
color: red;
}
</style>
</head>
<body>
<div>
<p class="test">测试文字</p>
</div>
</body>
</html>
看到的效果是蓝色，在对照表中的优先级，类选择器比标签选择器的优先级高所以呈现的效果就是蓝色。
总结一下：
- 选择器相同的，则按层叠性执行
- 选择器不同的，则根据选择器的权重执行就是选择器的优先级执行。
528
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
