前端攻城狮---css样式之继承性和层叠行性
其实在开发过程中用最多的还是后代选择器，那么就涉及到了继承性，说白了就是父亲有什么孩子就有什么，那么到底哪些属性可以有继承性呢？那么继承性了解一下。
继承性
css中有一些属性，标签即使不设置也可能加载
- 属性可被继承的有 color、font-size、font-family等（文字属性）
- 不可继承的属性有width height background-color(背景色)
点重叠性，正如css的全拼Cascading Style Sheets翻译过来就是层叠样式层.可见重叠性的重要性。
css层叠性
层叠性主要是用来解决样式冲突的，比如当你对一个标签设置很很多样式，那么到底显示哪一个标签呢？这就需要层叠性的一套比较逻辑来决定。
- id的权重>类选择器>标签选择器
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#id_div{
width: 100px;
height: 300px;
}
.class_div{
width: 200px;
height: 300px;
}
div{
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<div id="id_div" class="class_div">
</div>
</body>最终会显示id的样式，因为id的优先级大于类的优先级大于标签的优先级
- 复杂选择器的权重 id数量 class数量 标签的数量,依次比较，假如相等，再比较后面
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#div3 #p4{
color: yellow;
}
.div1 .div2 #div3 #p4{
color: blue;
}
#div2 #div3 #p4{
color: skyblue;
}
</style>
</head>
<body>
<div id="div1" class="div1">
<div class="div2" id="div2">
<div class="div3" id="div3">
<p class="p4" id="p4">asdasadsd</p>
</div>
</div>
</div>
</body>我们来看看到底会显示那个颜色
#div3 #p4 id:class:标签 2:0:0
.div1 .div2 #div3 #p4 id:class:标签 2:2:0
#div2 #div3 #p4 id:class:标签 3:0:0
我们先比id数量，很明显第三个样式id数量最多，所以显示第三个样式。
假如没有第三个，就第一个样式和第二个样式，那么会显示那个呢？
#div3 #p4 id:class:标签 2:0:0
.div1 .div2 #div3 #p4 id:class:标签 2:2:0
因为这两个样式的id数一样，所以需要去比较class，则第二个样式class的数量多，所以显示第二个样式。若都一样呢？别急后面会讲到。
- 只有选择到标签元素，才能计算权重，假如是继承而来，权重为0
接下来body不变，把style改一下
#div3 {
color: yellow;
}
#div2 #div3 {
color: skyblue;
}
.div1 .div2 #div3 .p4 {
color: blue;
}#div3 id：class：标签 1:0:0
#div2 #div3 id：class：标签 2:0:0
.div1 .div2 #div3 .p4 id：class：标签 1:3:0
乍一看不应该显示第二个样式的天蓝色嘛？怎么显示了蓝色？
所以先体会一下继承来的权重为0这句话！！！
因为前两个样式相对于p标签来说是继承来的，我们的 id：class：标签 应该是0:0:0，所以在和第三个样式比较的时候，当然显示第三个样式。
- 假如都选择到标签元素，权重相同，后面的会层叠掉前面的
这句话很好理解
.div1 #div2 .div3 .p4 {
color: blue;
}
.div1 .div2 #div3 .p4 {
color: green;
}这两个样式的权重 id：class：标签 都是1:3:0 那么谁在后面显示谁的样式，最后显示绿色
- 假如都是通过继承来的，通过就近原则来决定，谁描述的近，就听谁的
.div1 #div2 {
color: blue;
}
.div1 .div2 #div3 {
color: green;
}两个都是继承来的样式，但是第一个样式设置到div2，div2可以说是p的爷爷。第二个样式设置到div3，div3可以是说p的爸爸，爸爸更亲近点所以就用爸爸的样式来显示，最后就显示绿色。
- 都继承 并且描述远近一样 此时按照id数量 class数量 标签数量
.div1 #div2 .div3 {
color: blue;
}
.div1 .div2 #div3 {
color: green;
}这个时候两个样式都是爸爸，那怎么办？就是能按照前面的先比较权重，若相同在采用后面的样式去显示，最后显示了绿色。
最后附上完整逻辑的流程图，便于大家理解吧
css继承性和层叠性的已经讲完，接下来会来讲css的盒模型，如有表达错的请谅解和提出错的点，望能共同进步。
上一篇： docker的四种网络方式
下一篇： 快速掌握Harbor仓库的搭建与维护