CSS继承与层叠优先级秒懂

引言

css继承与层叠性是十分重要的基础知识，掌握其原理与规律可以写出更优雅的css代码。

抛出问题

css代码

.box1 .box2{
    color:red;
}
.box2{
    color:gold;
}

html代码

<div class="box1">
    <div class="box2">我是什么颜色?</div>
</div>

页面效果

各位大爷们，上面这个是我踏马遇到的类似代码，老大在全局定义了类似.box1 .box2的样式，我直接使用.box2修改样式却发现无效(服)。兄弟们，这就是css经典的层叠性问题。

CSS继承

css继承性顾明四姨就是：后代的标签可以继承祖先标签的部分属性

css可以继承的属性：以font,color,text,line开头的通常99%都可以继承

例子

可以发现标签box1设置的属性color,font,text,line的属性都被后代标签继承了。

<div class="box1">

    <div class="box2">

        我是什么颜色?

        <p>我是p</p>

    </div>

</div>


.box1{

    width: 500px;

    height: 500px;

    color:red;

    font-size: 50px;

    line-height: 25px;

    text-align: center;

    border: 1px solid gold;

}

CSS的层叠性

css选择器优先级

从高到低顺序是

!important>id选择器>类选择器>标签>其它

层叠性规律

1.直接选择器优先级>间接选择器优先级(狗都会)

看代码.box1是间接设置，而.box1 .box2是直接选择，因此是gold颜色

//html
<div class="box1">
    <div class="box2">
        我是什么颜色?
    </div>
</div>


//css
.box1 .box2{
    color:gold;
}
.box1{
    color:red;
}

2.多个直接选择器时（重重重重点）

1. 统计id,谁id多优先级高
2. id相同，统计类,谁类多优先级高
3. id与类都相同，谁标签多谁优先级高
4. id,类,标签个数都相同，则后面的样式覆盖前面的样式。

例子1

结果：金色。按照规律二者都是直接控制，先统计id个数都是0，再统计类，第一个类的个数大于第二个类的个数，因此优先级更高。

 //html
<div class="box1">
    <div class="box2">
        我是什么颜色?
    </div>
</div>


//css
.box1 .box2{
    color:gold;
}
.box2{
    color:red;
}

例子2

结果：金色。按照规律二者都是直接控制，先统计id个数都是0，再统计类，第一个类的个数大于第二个类的个数，因此优先级更高。

 //html
<div class="box1">
    <div class="box2">
        我是什么颜色?
    </div>
</div>


//css
.box1 .box2{
    color:gold;
}
.box1 div{
    color:red;
}

例子3

结果：红色。按照规律二者都是直接控制，先统计id个数都是1，再统计类，都是1，再统计标签也是1。所以后面的样式覆盖前面的样式了。

 //html
<div id="box1" class="div1">
    <div id="box2" class="div2">
        <div>我是什么颜色？</div>
    </div>
</div>


//css
#box1 .box2 div{
    color:gold;
}
.div1 #box2 div{
    color:red;
}

总结

学会的小伙伴们666走一波。