CSS三个非常重要的特性：层叠性、继承性、优先级
相同的选择器如果对相同的样式进行了设置，那么就会产生冲突，层叠性主要就是解决冲突的问题。
遵循的原则：
就近原则：哪个样式离结构近，就执行哪个样式。样式如果不冲突，就不会重叠例如：
<style> div { color: red; font-size: 16px; /*由于字体样式没有冲突，所以会正常显示*/ } div { color: blue; /*根据就近原则，颜色会是蓝色*/ } </style> <body> <div> 我到底是红色还是蓝色呢？ 没错，我会是蓝色的！ </div> </body>子标签会继承父标签的某些样式，如：文本颜色，字号等
例如：
<style> div { color: red; font-size: 16px; } </style> <body> <div> <p> 我会继承div爸爸的属性，所以我是红色的。 </p> </div> </body>注意：
恰当地使用继承可以简短代码量子元素可以继承父元素的某些样式（ text- font- line-这些元素开头的可以继承，一级 color 属性）再看一种情况：
<style> body { color: blue; font: 16px/1.5 'Mircosoft YaHei'; /*这里的1.5含义是 子元素的行高是当前文字大小的1.5倍 */ } </style> <body> <div> <ul> <li> 我没有指定文字大小欸，但是我会继承body的文字大小16px，所以行高就是16*1.5=24px </li> </ul> </div> </body>如此设置 1.5 的好处是：里面的子元素可以根据自己的文字大小自动地调整行高。
当一个元素指定了多个选择器，那么就会存在优先级的问题
若选择器相同，则根据层叠性若选择器不同，则根据选择器权重执行如表：
选择器选择器权重继承或*0,0,0,0元素选择器0,0,0,1类选择器、伪类选择器0,0,1,0ID选择器0,1,0,0行内样式 style = “”1,0,0,0!important无穷大权重从上至下依次变大
例如：
<style> .test { color: red; } div { color: blue; } </style> <body> <div class="test"> 我是蓝色还是红色呢？ 由于类选择器的权重更大，所以我是红色的。 </div> </body> <style> .test { color: red; } div { color: blue!important; } </style> <body> <div> 我是蓝色还是红色呢？ 由于存在!important，所以我是蓝色的。 </div> </body>优先级注意点：
权重有四组数字组成，但不会有进位，可以理解为：类选择器永远大于元素选择器，以此类推
等级判断从左至右，如果某一位数值相同，则判断下一位
继承的权重是0，举个例子：
<style> #father { color: blue; } p { color: red; } </style> <body> <div id="father"> <p> 我其实是红色，因为继承的权重为零，我不会继承div爸爸的蓝色 </p> </div> </body>注意链接标签<a>的特殊情况
<style> body { color: red; } </style> <body> <a href="#"> 你以为我继承了body的红色？你错了！ 我由浏览器默认指定成了 蓝色、有下划线。 如果要修改我，要单独对我进行修改 </a> </body>权重的叠加
<style> /* ul li 的权重是 0,0,0,1 + 0,0,0,1 = 0,0,0,2 */ ul li { color: blue; } /* li 的权重是 0,0,0,1 */ li { color: red; } </style> <body> <ul class = "nav"> <li> 我是li， 由于 ul li 的权重大于 li，所以我是蓝色 </li> </ul> </body> <style> /* ul li 的权重是 0,0,0,1 + 0,0,0,1 = 0,0,0,2 */ ul li { color: blue; } /* .nav li 的权重是 0,0,1,0 + 0,0,0,1 = 0,0,1,1*/ .nav li { color: red; } </style> <body> <ul class = "nav"> <li> 我是li， 由于 .nav li 的权重大于 ul li，所以我是红色 </li> </ul> </body>注意，权重的叠加不会有进位问题！
如何把第一个 li 中的文字改成蓝色？
<style> .nav li { color: red; } </style> <body> <ul class="nav"> <li>把我改成蓝色</li> <li>我是li</li> </ul> </body>你是不是这么想的？直接把第一个 li 中添加一个类选择器然后：
<style> .nav li { color: red; } .blue { color: blue; } </style> <body> <ul class="nav"> <li class="blue">把我改成蓝色</li> <li>我是li</li> </ul> </body>这么做你就错了，因为 .nav li 的权重大于 .blue，所以颜色并不会改变，正确的操作是：
<style> .nav li { color: red; } .nav .blue { /*这么做就可以了*/ color: blue; } </style> <body> <ul class="nav"> <li class="blue">把我改成蓝色</li> <li>我是li</li> </ul> </body>