css（九）- 层叠性权重相同处理

最新推荐文章于 2022-10-09 16:04:05 发布

TynMhxx

最新推荐文章于 2022-10-09 16:04:05 发布

阅读量511

点赞数

分类专栏： WEB前端

本文链接：https://blog.csdn.net/tynmhxx/article/details/87557659

版权

WEB前端专栏收录该内容

15 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>层叠性权重</title>
    <style type="text/css">
        /*!*1 1 1*!*/
        /*#box2 .wrap3 p {*/
            /*color: yellow;*/
        /*}*/
        /*!*1 1 1*!*/
        /*#box1 .wrap2 p {*/
           /*color: red;*/
        /*}*/
        /*-------------------------------------------*/
        /*继承来的*/
        /*其实就是 0*/
        #box1 #box2 .wrap3{
            color: red;
        }
        /*选中来的*/
        /*1 1 1*/
        .wrap1 #box2 .wrap3{
            color: green;
        }
    </style>
</head>
<body>
    <!--
        当权重一样的时候，后设置的属性为准。前提是权重一样，后来者居上
        继承来的属性 权重为0
        总结：先看标签元素有没有被选中，如果选中了就数数（id、class、标签）
             比较权重，谁的权重大就显示谁的属性
             如果没有被选中标签元素，权重为0。
             如果属性都是被继承下来的。权重都为0.
             权重都是0：'就近原则'：谁描述的近，就选择谁的属性,都描述的一样近就比较权重
    -->
    <div id="box1" class="wrap1">
        <div id="box2" class="wrap2">
            <div id="box3" class="wrap3">
                <p>再来猜猜我是什么颜色</p>
            </div>
        </div>
    </div>
</body>
</html>

TynMhxx

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css（九）- 层叠性权重相同处理

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;层叠性权重&lt;/title&gt; &lt;style type="text/css"&gt;
复制链接

扫一扫