css3后代选择器和子代选择器的区别及优先级

最新推荐文章于 2024-06-13 22:49:40 发布

大白手记

最新推荐文章于 2024-06-13 22:49:40 发布

阅读量2.9k

点赞数 8

本文链接：https://blog.csdn.net/weixin_45088998/article/details/100063655

版权

css3后代选择器和子代选择器的区别及优先级

子代选择器：>号

    .father>div{
        border: 2px solid blue; 
                                           }`

后代选择器：空格

    .father div{
        border: 2px solid pink;
    }

子代选择器跟后代选择器的区别

html代码

<body>
    <div class="father">
      <div>
          儿子
          <div>
              孙子
          </div>

      </div>
    </div>
</body>

只用父类选择器的css代码

    .father{
        width: 200px;
        height: 200px;
        border: 2px solid red;
    }

    .father>div{
        border: 2px solid blue; 
        margin: 20px 20px;
    }

只用父类选择器的浏览器显示效果：此时仅有子代被选择，后代的后代无边框没有被选择

只使用后代选择器的css代码

    .father{
        width: 200px;
        height: 200px;
        border: 2px solid red;
    }

    .father div{
        border: 2px solid pink; 
        margin: 20px 20px;
    }

仅使用后代选择器的情况：所有后代都被选择
在这里插入图片描述

两者优先级比较：若两个选择器同时存在
按代码先后顺序分为两种情况
第一种：

    .father div{
        border: 2px solid pink; 
        margin: 20px 20px;
    }
    .father>div{
        border: 2px solid blue; 
        margin: 20px 20px;
    }

在这里插入图片描述
第二种：

    .father>div{
        border: 2px solid blue; 
        margin: 20px 20px;
    }
    .father div{
        border: 2px solid pink; 
        margin: 20px 20px;
    }

按照代码顺序
第一种先选择所有后代，再选择子代
第二种先选择子代再选择所有后代
可以产生不同的结果可以得知两个选择器可以相互覆盖，所以优先级相同

大白手记

关注

8
点赞
踩
20

收藏

觉得还不错? 一键收藏
2
评论
css3后代选择器和子代选择器的区别及优先级

css3后代选择器和子代选择器的区别及优先级子代选择器：>号 .father>div{ border: 2px solid blue; }`后代选择器：空格 .father div{ border: 2px solid pink; ...
复制链接

扫一扫