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老师，相关视频讲解请移步。
