前言
CSS有三个非常重要的特性：层叠型、继承性、优先级。
一、层叠性？
相同选择器给设置相同的样式，此时一个样式就会覆盖另一个冲突的样式。层叠性主要解决样式冲突的问题。
- 层叠性原则：
- 样式冲突 ，遵循就近原则，哪个样式离结构近，就执行哪个样式。
- 样式不冲突 ，不会重叠。
示例代码：
<style>
/* color：blue 距离div近，所以红色会被第蓝色覆盖 */
/* font-size 属性不冲突，所以不会被覆盖掉 */
div { color: red; font-size: 20px; }
div { color: blue; }
</style>
<div> CSS层叠性：此时呈蓝色,字体大小为20px</div>
二、继承性？
子标签会继承父标签的某些样式，如文本颜色，字体大小。
- 继承性注意：
- 恰当的继承以达到简化代码，降低CSS的复杂性。
- 子元素可以继承父元素的样式（以 text、font、line 开头的可以继承，以及color）
示例代码：
<style>
div { color: red; font-size: 20px; }
</style>
<body>
<div><p> CSS继承：p标签内呈红色，字体大小20px</p></div>
</body>
行高的继承性
在CSS继承性中 对于行高 继承尤为突出，可以使子元素根据自己文字大小自动调整行高。如，京东。
- 行高可以跟单位亦可不跟单位
- 如果子元素没有给定行高，则会继承父元素的行高
- 此时子元素的行高是，当前子元素文字大小*父元素给定的行高倍数
示例代码：
<style>
body { font: 12px/1.5 }
/* 子元素继承父元素body的行高1.5
当前元素文字大小 font-size 的1.5
14*1.5=21*/
div { font-size: 14px}
</style>
<body>
<!-- 此时div行高为21px-->
<div>示例文字</div>
</body>
三、优先级？
当同一个元素指定多个选择器，就会有优先级的产生。
- 选择器相同，则执行层叠性。
- 选择器不同，则根据选择器权重执行。
- 继承权重为0。
示例代码：
<style>
/* !important> 行内样式 > ID选择器 > 类选择器权重/伪类选择器 > 元素选择器 */
div { color: red!important; }
.test { color: blue; }
#demo { color: green; }
/* p继承的权重为0 */
p { color: purple; }
</style>
<body>
<!-- 此时文字颜色为红色 -->
<div class="test" id="demo" sytle="color: pink">示例文字
<!-- p标签内文字为紫色 -->
<p> p 标签</p>
</div>
</body>
权重叠加
复合选择器中的权重叠加。
示例代码：
<style>
/* .test 权重 10 + 1 = 11 */
.test li { color: green; }
/* ul li 权重 1 + 1 = 2 */
ul li { color: red; }
/* li 权重 1 */
li { color: blue; }
</style>
<body>
<ul class="test">
<li>li中的文字</li>
</ul>
</body>
总结
基础需牢记。在CSS三大特性中，层叠性跟继承性比较好理解，优先级中牵扯到选择器权重的问题，需要多练习，加深记忆。权重表示上，采用4位表示且不进位（类选择器：0,0,1,0）。平时便于记忆（类选择器：10），在面试中，切不可说是10。
继承性中，行高的继承在实际开发中时常用到，采用上面的写法，使子元素自适应调整行高。
此文章参考pink老师，相关视频讲解请移步。
4万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
