CSS有三个非常重要的特性：层叠性、继承性、优先级。

 1.层叠性
 相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。层叠性主要解决样式冲突的问题。
 层叠性原则
        样式冲突，遵循的原则是就近原则，那个样式离结构近，就执行哪个样式
        样式不冲突，不会重叠。
<style>
        div {
            color: tomato;
        }
        div {
            color: turquoise;
        }
    </style>
</head>
<body>
    <div>天王盖地虎</div>
</body>

color样式冲突，第二个color: turquoise的样式离结构更近，所以执行第二个样式。

2.继承性

现实中的继承：我们继承了父亲的姓；
CSS中的继承：子标签会继承父标签的某些样式，比如文本颜色和字号。简单理解是子承父业。
恰当的使用继承可以简化代码，降低CSS样式的复杂性。
子元素可以继承父元素的样式（text-，font-，line-这些元素开头的可以继承，以及color属性）
<style>
     div {
            color: turquoise;
            font-size: 14px;
        } 
    </style>
<body>
<div>
        <p>龙生龙，凤生凤，老鼠的儿子会打洞</p>
    </div>
</body>

这里没有指定p的文字样式，但是p可以继承其父元素即div的文字样式。

特别地：

行高的继承
语法：
body {
　　font：12px/1.5 "Microsoft Yahei";
}
    行高可以跟单位，也可以不跟单位；
    如果子元素没有设置行高，则会继承父元素的行高为1.5 
<style>
        body {
            color: turquoise;
            /* font: 14px/28px 'Microsoft Yahei'; */
            font: 12px/1.5 'Microsoft Yahei';
        }
        div {
            /* 子元素继承了父元素body的行高1.5
            这个1.5就是当前文字大小font-size的1.5倍 */
            font-size: 14px;
        }
        p {
            /* 1.5*16=当前的行高  */
            font-size: 16px;
        }
        /* li没有手动指定文字大小，则会继承父亲的文字大小   body文字大小12px  所有li的文字大小为12px  所以当前li的行高就是12*1.5*/
    </style>
<body>
<div>粉红色的回忆</div>
    <p>粉红色的回忆</p>
    <ul>
        <li>我没有指定文字大小</li>
    </ul>
</body>

3.优先级

当同一个元素指定多个选择器，就会有优先级的产生。
    选择器相同，则执行层叠性；
    选择器不同，则根据选择器权重执行。
选择器权重：
        继承或者*                            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;
        }
        .test {
            color: red!important;
        }
        #demo {
            color: seagreen;
        }
    </style>
</head>
<body>
    <div class="test" id="demo" style="color: rgb(38, 0, 252);">你笑起来真好看</div>
</body>

 

优先级注意点：
    1.权重是由4组数字组成，但还不会有进位
    2.可以理解为类选择器永远大于元素选择器，id选择器永远大于类选择器，以此类推；
    3.等级判断从左到右，如果某一位数值相同，则判断下一位数值；
    4.可以简单记忆法：通配符和继承权重为0，标签选择器为1，类（伪类）选择器为10，id选择器100，行内样式表为1000，!important为无穷大；
    5.继承的权重是0，如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是0。
    特别地：a链接  浏览器默认指定了一个样式：蓝色有下划线。
所以以后我们看标签到底执行那个样式，就看这个标签有没有被直接选出来。
特别地：
权重叠加：如果是复合选择器，则会有权重叠加，需要计算权重。
复合选择器会有权重叠加的问题  虽然会叠加，但永远不会进位。 
<style>
        /* ul li权重 0,0,0,1+0,0,0,1=0,0,0,2 */
        /* li的权重是0,0,0,1 */
        li {
            color: seagreen;
        }
        ul li {
            color: slateblue;
        }
        /* .nav li 权重 0,0,1,0+0,0,0,1=0,0,1，1 */
        .nav li {
            color: yellow;
        }
    </style> 
</head>
<body>
    <ul class="nav">
        <li>大猪蹄子</li>
        <li>猪尾巴</li>
        <li>猪肘子</li>
    </ul>
</body>