层叠性

        div {
            color: blue;
        }

        div {
            color: yellow;
        }

看这段代码，我们前面申明了div是蓝色了，后面有让他变成黄色了，那么我现在的div是什么颜色呢，答案很简答，根据就近原则，div要现在应该是是黄色。层叠性可以简单理解成覆盖。我们在chrome按下F12检查一下，第一个div是被划掉了。

但是如果是这样的：

        div {
            color: blue;
            font-size: 56px;
        }

        div {
            color: yellow;
        }

只会覆盖掉冲突的颜色选项，但是字体大小不会覆盖。

简单总结一下就是：

•  样式冲突，按照就近原则覆盖
•  样式不冲突不会覆盖

继承性

    <div>
        我是div
        <p>我是div的p</p>
    </div>

        div {
            color: blue;
        }

如上述代码，div元素的不仅仅是蓝色，p的文字也是蓝色。这是因为：css的继承性

子标签会继承父标签的默写样式，如文本颜色和字号

注意：

这里没有继承所有的样式，而是继承了部分样式--->和字体相关的样式text-,font-,line- ,color

优先级

说明：

• 使用本方法表示优先级，0000 不是二进制数（十进制），后面设计到权重的叠加
• 数越大，优先级越大,优先级越大就会覆盖掉优先级小的样式
• !importent 使用方法就是在样式后面加一个!importent

例如color:red!important;

复合标签优先级的叠加

        ul li {
            color: red;
        }

        li {
            color: blue;
        }

    <ul>
        <li>yxq1</li>
        <li>yxq2</li>
        <li>yxq3</li>
    </ul>

请问现在li标签的颜色？，很简答，是red

这是因为ul li比li的优先级高，ul li的优先级为0001+0001两个标签选择器的叠加，但是li的权重为0001，显然现在是li是红色。

补充

这里的优先级，是样式冲突的时候，覆盖掉谁的问题的解决办法，在举一个例子吧

        /* .nav li 的优先级为 0010+ 0001 =0011 */
        .nav li {
            color: blue;
            text-decoration: underline;
        }

        /* .nav .yxq的优先级为 0010+0010=0020 */
        .nav .yxq {
            color: red;
        }

    <ul class="nav">
        <li class="yxq">越行勤1</li>
        <li>越行勤2</li>
        <li>越行勤3</li>
    </ul>

显示效果为：

这里只有样式color冲突 ，根据优先级计算 .nav .yxq的优先级跟高，所以越行勤1为红色，但是text-decoration: underline;没有冲突，所以我们都有这个效果。

结语

没有