CSS继承性和层叠性

CSS 有两大特性：继承性和层叠性

继承性

面向对象语言都会存在继承的概念。在面向对象语言中，继承的特点：继承父类的属性和方法。

继承：给父设置一些属性，子级继承了父级的该属性，这就是css中的继承

有一些属性是可以继承下来：color，font-*，text-*，line-*. 主要是文本级的标签元素

但是像一些盒子元素属性，定位的元素(浮动，绝对定位，固定定位)不能继承

层叠性

层叠性：权重大的标签覆盖权重小的标签

权重：谁的权重大，浏览器就会显示谁的属性，当权重一样的时候，就以后来设置的属性为准

谁的权重大？ 非常简单就是计算数量

计算：id 的数量，class的数量，标签的数量，顺序不能乱

<style type="text/css">
    /*1  0  0 */显示红色
    #box{
        color: red; 
    }

    /*0  1  0*/
    .container{
        color: yellow;
    }

    /*0  0  1*/
    p{
        color: purple;
    }
</style>

还有一个"就近原则"，当CSS设置的属性值是通过继承设置的，那么继承来的属性，它的权重为0。权重都为0的话，谁描述的近，就显示谁的属性。所谓描述的近，就是选中到最内层的距离越近

<style type="text/css">
    #box1 #box2 .wrap3{
        color: red;
    }
    .wrap1 #box2{
        color: green;
    }
</style>


<div id='box1' class="wrap1">
    <div id="box2" class="wrap2">
        <div id="box3" class="wrap3">
            <p>再来猜猜我是什么颜色？</p>
        </div>
    </div>
</div>

总结：

• 先看标签元素有没有被选中，如果选中了，就计算数量(id，class，标签的数量)，谁的权重大，就显示谁的属性，权重一样大，后来者居上
• 如果没有选中标签元素，权重为0，如果属性是被继承下来的，权重都是0。权重都是0："就近原则"，谁描述的近，就显示谁的属性

!important 的使用
!important：设置权重为无限大
!important 不影响继承来的权重，只影响选中的元素，不要随便使用!important，因为使用它会影响页面的布局