层叠性权重相同处理

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

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

 

转载于:https://www.cnblogs.com/zhaoyunlong/p/9079251.html

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值