欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

CSS继承性和层叠性

程序员文章站 2022-06-04 14:41:30
...

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,因为使用它会影响页面的布局