持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第17天，点击查看活动详情
CSS的三大特性
CSS有非常重要的三个特性:层叠性、继承性、优先级
层叠性
我们如果给相同的选择器设置相同的样式,那么一个样式就会覆盖另一个冲突的样式。那么层叠性主要就是解决样式的冲突问题。
层叠性对应着有一些原则:
- 样式冲突，遵循的原则是就近原则，那个样式离结构近，就会执行哪个样式。
- 样式不冲突，就不会层叠
举个简单的例子:
<style>
div{
color:red;
font-size:15px;
}
div{
color:pink;
}
</style>
<div>它是什么颜色的呢</div>
知道了层叠性对应的原则后，我们就可以知道“它是什么颜色的呢”的文字是粉色的啦!再仔细看看，第一个样式我们还给它设置了字体属性，由于第二个样式并没有给它设置，即没有发生冲突，所以就不会发生层叠。
继承性
CSS中的继承是指子标签会继承父标签的某些样式，比如text-，font-，line-这些元素开头的可以继承，以及color属性。 比如说:
<style>
body{
12px/1.5；
}
div{
font-size:14px;
}
</style>
div标签是body的子标签，因此div标签就会继承父标签行高1.5，这个1.5就是说当前元素文字大小font-size的1.5倍，即14*1.5。
优先级
当一个元素指定多个选择器的时候，就会有优先级的产生。
- 选择器相同时，就会根据层叠性的原则执行层叠性。
- 选择器不同时，就会根据选择器的权重执行。
具体的选择器权重如下:
继承或者* < 元素选择器 <类选择器或伪类选择器 < id选择器 < 行内样式style="" < !important重要的
举一个例子简单理解一下:
<style>
.test{
color:red;
}
div{
color:pink;
}
#demo{
color:purple;
}
</style>
<body>
<div class="test" id="demo" style="color:blue">你真好看</div>
</body>
那么我们就思考下，“你真好看”到底是什么颜色的呢？根据优先级，我们可以知道最终的颜色为蓝色，如果我们在元素选择器中添加！important则会先执行这个，最后的颜色就会成为粉色。
