1、层叠性
（1）概念
相同的选择器设置相同的样式，此时，相同的样式就会覆盖另一个冲突的样式，层叠性主要解决样式冲突的问题
（2）原则
遵循就近原则，哪一个样式距离结构近，就执行哪一个样式
样式不冲突，不会层叠
（3）验证
<html> <head> <meta charset="utf-8"> <title></title> <style> div { color: red; } div { color: yellow; } </style> </head> <body> <div>三人行，必有我师</div> </body> </html>
相同的选择器，不是所有的样式都相同的情况：不会覆盖
<html> <head> <meta charset="utf-8"> <title></title> <style> div { color: red; text-decoration: line-through; } div { color: yellow; } </style> </head> <body> <div>三人行，必有我师</div> </body> </html>
2、继承性
子标签会继承父标签的某些样式，如：文本的颜色和字号
（1）子标签继承父标签
<html> <head> <meta charset="utf-8"> <title></title> <style> div { color: pink; font-size: 12px; } </style> </head> <body> <div> <p>子不教，父之过</p> </div> </body> </html>
选择器的样式为<div>标签，但是<p>标签依旧会有<div>的样式，这就是继承。恰当地使用css的继承性可以简化代码。例如：在<body>标签里面定义了属性之后在他里面的所有标签就会有该属性（子元素会继承父元素的样式）。
（2）行高的继承
<html> <head> <meta charset="utf-8"> <title></title> <style> body { color: pink; font-size: 12px/1.5; } div{ font-size: 14px; } </style> </head> <body> <div>字如其心</div> <p>子不教，父之过</p> </body> </html>
将子标签的行高设置为父标签的1.5倍：
子元素可以继承的父元素包含：text、font、line和color
3、优先级
当同一个元素指定多个选择器，就会有优先级的产生
选择器相同，就执行层叠性
选择器不同，就根据选择器权重执行：继承或者*>元素选择器>类选择器或伪类选择器>ID选择器>行内样式style=“”>！important
（1）优先级
<html> <head> <meta charset="utf-8"> <title></title> <style> div { color: pink; } .test{ color: red; } </style> </head> <body> <div class="test">字如其心</div> </body> </html>
元素选择器>类选择器，因此文字的颜色为红色
（2）！important的优先级
<html> <head> <meta charset="utf-8"> <title></title> <style> div { color: pink!important; } .test{ color: red; } </style> </head> <body> <div class="test">字如其心</div> </body> </html>
在加了！important之后，即使元素选择器的优先级较高，也会先执行类选择器
（3）继承的权重是0
<html> <head> <meta charset="utf-8"> <title></title> <style> #father{ color: red; } p{ color: pink; } </style> </head> <body> <div id="father"> <p>字如其心</p> </div> </body> </html>
虽然父亲的标签的优先级较高，但是，从父亲继承来的优先级为0，当然，还是执行p标签自己定义的优先级
（4）链接：浏览器默认指定了一个样式，有下划线
<html> <head> <meta charset="utf-8"> <title></title> <style> body{ color: red; } </style> </head> <body> <a href="#">新闻</a> </body> </html>
给body书写的样式的颜色为红色，但是，并没有继承父亲的红色，而是自己的蓝色
4、权重的叠加
<html> <head> <meta charset="utf-8"> <title></title> <style> li{ color: red; } ul li{ color: greenyellow; } </style> </head> <body> <ul> <li>小猪猪</li> <li>大笨猪</li> <li>大猪蹄子</li> </ul> </body> </html>
style里面的样式都是指向 li 的，但是ui li 是两个标签的叠加，li是一个标签，因此，ul li的权重更大
<html> <head> <meta charset="utf-8"> <title></title> <style> li{ color: red; } ul li{ color: greenyellow; } .nav li{ color:sandybrown; } </style> </head> <body> <ul class="nav"> <li>小猪猪</li> <li>大笨猪</li> <li>大猪蹄子</li> </ul> </body> </html>
.nav li 的权重大于ul li 的权重
如果是复合选择器就会存在权重的叠加，需要计算权重