CSS层叠性
所谓层叠性是指多种CSS样式的叠加，是浏览器处理冲突的一个能力，如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉，比如先给某个标签指定了内部文字颜色为红色，接着又指定了颜色为黄色，此时出现一个标签指定了相同样式不同值的情况，这就是样式冲突。一般情况下，如果出现样式冲突，则会按照CSS书写的顺序，以最后的样式为准。
CSS继承性
所谓继承性是指书写CSS样式表时，子标签会继承父标签的某些样式，想要设置一个可继承的属性，只需将它应用于父元素即可。
CSS优先级
关于CSS权重，有一套公式可计算，规范如下：
继承或者通配符选择器的贡献值 0,0,0,0
每个标签选择器贡献值 0,0,0,1
每个类，伪类选择器贡献值 0,0,1,0
每个id选择器贡献值 0,1,0,0
每个行内样式贡献值 1,0,0,0
每个!important的贡献值（在属性后面加!important） 无穷大
四个级别，值从做到右，左边的最大，一级大于一级，数位之间没有进制，级别之间不可超越。权重不继承。
权重叠加
ul li {} 0001+0001 = 0002
li {} 0001
nav ul li {} 0001+0001+0001 = 0003
.nav ul li 0010+0001+0001 = 0012
`#nav p 0100+0001 = 0101
一个栗子
<div id="box1" class="c1">
<div id="box2" class="c2">
<div id="box3" class="c3">这是啥颜色</div>
</div>
</div>
/* 下面这个的意思是id为box1下面的所有div，不管是直接子元素还是孙子元素，都将这样设置类型
也就是说，box1下面的所有div的权重都是 0101了 */
#box1 div {
color: green;
}
/* #box2 div {
color: red;
} */
/* 这个地方的意思是设置box3的权重为0100，它也是box1下面的子元素，和上面设置权重对比，上面的权重高，所以为green */
#box3 {
color: yellow;
}
如果把上面代码中注释的地方放出来，显示的颜色就是red，为啥呢，因为box2下面的div包括box3，而且选择器权重为0101，比#box3选择器的权重高，和#box1 div选择器的权重相同，因为放在了后面，所以颜色被重置为red。
<nav id="omg">
<ul id="omgomg">
<li id="shit">是个鬼颜色啊</li>
<li>是个鬼颜色</li>
<li>是个鬼</li>
</ul>
</nav>
/* 这个地方的意思是设置omg下面的所有ul权重，这里注意，设置的是ul，而不是ul下面的li，所以这个ul的权重是0101 */
#omg ul {
color: red;
}
/* #omgomg li {
color: green;
} */
/* 这个地方的意思是设置shit的权重，它是ul下面的li，并不继承ul的权重，所以它自身的权重就是0100，所以显示为黄色
而其他没有设置这个属性的li，继承ul的颜色属性红色 */
#shit {
color: yellow
}
这里要注意的地方是，后代选择器设置的是所有的子元素、孙子元素…只要包含，就会生效，在判断样式的时候，首先分析有哪些选择器设置到这个元素上，再分析各个选择器的权重，最后看顺序。
