本文参考链接：https://web.qianguyihao.com/02-CSS基础/05-CSS样式表的继承性和层叠性.html#层叠性举例
CSS的继承性
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
color: red;
}
</style>
</head>
<body>
<div>
<p>我是段落1</p>
<p>我是段落2 </p>
<p>我是段落3</p>
</div>
</body>
</html>
我们给div标签增加红色属性，却发现，div里的每一个子标签<p>也增加了红色属性。于是我们得到这样的结论：
有一些属性，当给自己设置的时候，自己的后代都继承上了，这个就是继承性。
关于文字样式的属性，都具有继承性。这些属性包括：color、 text-开头的、line-开头的、font-开头的。
关于盒子、定位、布局的属性，都不能继承。
CSS的层叠性
层叠性：就是css处理冲突的能力。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
p {
color: red;
}
.mice {
color: coral;
}
#ncie {
color: blue;
}
</style>
</head>
<body>
<p class="mice" id="ncie">nice</p>
</body>
</html>
上述代码效果如下，
顺序如下：
id 选择器
类选择器、属性选择器、伪类选择器
标签选择器、伪元素选择器
因为对于相同方式的样式表，其选择器排序的优先级为：
ID选择器 > 类选择器 > 标签选择器
层叠性举例
- 举例1
（上图来自https://web.qianguyihao.com/02-CSS%E5%9F%BA%E7%A1%80/05-CSS%E6%A0%B7%E5%BC%8F%E8%A1%A8%E7%9A%84%E7%BB%A7%E6%89%BF%E6%80%A7%E5%92%8C%E5%B1%82%E5%8F%A0%E6%80%A7.html#%E5%B1%82%E5%8F%A0%E6%80%A7%EF%BC%9A%E8%AE%A1%E7%AE%97%E6%9D%83%E9%87%8D，侵删） - 举例2
如果两个样式的权重相同，那么就采取就近原则。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box1 {
color: #ff8500;
}
.box2 {
color: aqua;
}
.box3 {
color: green;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2">
<div class="box3">
<p>猜猜我是什么颜色</p>
</div>
</div>
</div>
</body>
</html>
- 举例3
!important标记：优先级最高
代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box1 .box2 .box3 .box {
color: #ff8500;
}
.box {
color: skyblue!important;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2">
<div class="box3">
<p id="col" class="box">猜猜我是什么颜色</p>
</div>
</div>
</div>
</body>
</html>
