01-CSS的三大特性（层叠性、继承性、优先级）

层叠性

相同选择器给设置相同的样式，此时的一个样式会覆盖（层叠）另一个冲突的样式。

原则：

• 样式冲突，遵循就近原则，哪个样式离结构近，就执行哪个样式。
• 样式不冲突，不会层叠。

如下示例：

    <style>
        div {
            color: red;
            font-size:12px;
        }
        div {
            color: pink;
        }
    </style>

<body>
    <div>
        我用了谁的样式呢？
    </div>
</body>

得到的样式是12px的粉色字体。

继承性

子标签会继承父标签的某些样式，如文本颜色和字号。

• 恰当使用继承可简化代码，降低CSS样式的复杂性。
• 子元素可继承父元素的（text- ，font- ，line- 这些元素开头的样式，以及color属性）。

如下示例：

<head>
    <style>
        div {
            color: red;
            font-size: 12px;
        }
    </style>
</head>

<body>
    <div>
        <p>龙生龙，凤生风，老鼠生的孩子会打洞</p>
    </div>
</body>

虽然p没有设置样式，但是会继承div的样式。所以得到的是12px的红色字体。

- 行高的继承

        body {
        /* font: 12px/24px 'Microsoft YaHei';*/
           font: 12px/1.5 'Microsoft YaHei'; /*这个的行高为12*1.5*/
        }

• 行高可以跟单位（如25px）也可以不跟单位（不跟单位是倍数形式）。
• 继承就是如果子元素没有设置行高，则会继承父元素的行高。
• （倍数形式）此时子元素的行高是：当前子元素文字大小*倍数。

优先级

当同一个元素指定多个选择器，就会有优先级的产生。

• 选择器相同，则执行层叠性。
• 选择器不同，则根据选择器权重执行。

选择器	选择器权重
继承 或 *	0，0，0，0
元素选择器	0，0，0，1
类选择器，伪类选择器	0，0，1，0
ID选择器	0，1，0，0
行内样式 style=""	1，0，0，0
!important 重要的	无穷大

由上至下，选择器权重逐级增大

演示： （从元素选择器开始，最后一个才演示继承）

• 很明显，只有元素选择器的时候，字体是粉色的。

<style>
     div{ color: pink ; }
</style>

<body>
    <div>GOOD </div>
</body>

• 当有类选择器时，类选择器会覆盖元素选择器，字体变成红色。

<style>
     div{ color: pink ; }
    .test { color: red; } 
</style>

<body>
    <div class="test">GOOD </div>
</body>

• 当有ID选择器，ID选择器又会覆盖类选择器，字体变成绿色。

<style>
     div{ color: pink ; }
    .test { color: red; } 
    #demo {color:green; }
</style>

<body>
    <div class="test" id="demo">GOOD </div>
</body>

• 当有行内样式时，行内样式又会覆盖ID选择器，字体变成紫色。

<style>
     div{ color: pink ; }
    .test { color: red; } 
    #demo {color:green; }
</style>

<body>
    <div class="test" id="demo style="color: purple;">GOOD </div>
</body>

• 在级别很低的元素选择器后加了==!important==后，就变成老大了，是最高级的！此时字体是粉红色。

<style>
     div{ color: pink !important ;  }
    .test { color: red; } 
    #demo {color:green; }
</style>

<body>
    <div class="test" id="demo style="color: purple;">GOOD </div>
</body>

• 继承：虽然父亲的权重很厉害，但是继承过来权重就会变成0，所以还是比不上元素选择器。所以，p的字体变为蓝色。

<style>
     #father { color: red !important; }
       p { color: skyblue; }
</style>

<body>
    <div id="demo">
        <p>GOOD</p>
    </div>
</body>

特殊例子

a链接在浏览器中默认指定了一个样式“蓝色的 有下划线” （元素选择器） ,因为自身的权重比继承的权重大，故无法通过继承修改样式。

<style>
     body { color: red; }
</style>

<body>
  <a href="#">我很独特</a>
</body>

权重叠加

权重要从左往右一个位一个位的比较

如果是复合选择器，则会有权重叠加，需要计算权重。虽然权重有叠加，但是永远不会有进位。

  <style>
        /* ul li 的li权重是0，0，0，1 + 0，0，0，1 = 0，0，0，2 */
        ul li { color: green; }
        /* li 的权重是0，0，0，1*/
        li {  color: red; }
  </style>

<body>
    <ul>
        <li>西瓜</li>
        <li>火龙果</li>
        <li>哈密瓜</li>
    </ul>
</body>

简单计算

•   div ul li   ---------------     0,0,0,3
• .nav ul li   ---------------     0,0,1,2
•  a:hover   ---------------     0,0,1,1
• .nav a      ---------------     0,0,1,1