层叠性权重相同处理

第一种现象：当权重相同时，以后来设置的属性为准，前提一定要权重相同

<head>
    <meta charset="UTF-8">
    <title>权重</title>
    <style>
         #box2 .wrap3 p{
            color: yellow;
        }

        #box1 .wrap2 p{
            color: red;
        }
    </style>
</head>
<body>
<!--如果属性都是被继承下来的 权重都是0 。权重都是0:"就近原则" ： 谁描述的近，就显示谁的属性-->
<div id="box1" class="wrap1">
    <div id="box2" class="wrap2">
        <div id="box3" class="wrap3">
            <p>再来看看我</p>
        </div>
    </div>
</div>
</body>
权重相同时选择后者

我们会发现此时显示的是红色的。

 

第二种现象： 第一个选择器没有选中内层标签，那么它是通过继承来设置的属性，那么它的权重为0。第二个选择器选中了内层标签，有权重。

所以 继承来的元素 权重为0。跟选中的元素没有可比性。

#box1 #box2 .wrap3{
    color: red;
}
#box2 .wrap3 p{
    color: green;
}

我们会发现此时显示的是绿色的

 

第三种现象：如果都是继承来的属性，谁描述的近，显示谁的属性。'就近原则'

#box1 #box2 .wrap3{
    color: red;
}
 .wrap1 #box2{
    color: green;
}

!important 的使用。

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

 

posted @ 2018-05-23 20:44  可爱的红领巾  阅读(157)  评论(0)  编辑  收藏  举报