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; 
}

image.png

　如果把上面代码中注释的地方放出来，显示的颜色就是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
}

image.png

　这里要注意的地方是，后代选择器设置的是所有的子元素、孙子元素…只要包含，就会生效，在判断样式的时候，首先分析有哪些选择器设置到这个元素上，再分析各个选择器的权重，最后看顺序。