选择器的权重中对交集选择器，分组(并集)选择器，以及关系选择器的理解

最新推荐文章于 2022-04-27 16:16:57 发布

one or two

最新推荐文章于 2022-04-27 16:16:57 发布

阅读量867

点赞数 1

文章标签： css html

本文链接：https://blog.csdn.net/qq_41633396/article/details/116787860

版权

先看如下代码

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            div{
                color:red;
            }
            .box1{
                color:blue;
            }
        </style>
    </head>
    <body>
       <div class="box1">我是一个div</div>
    </body>
</html>

在这里插入图片描述

交集选择器，意味着会“相加”

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            div.box1{
                color:red;
            }
            .box1{
                color:blue;
            }
        </style>
    </head>
    <body>
       <div class="box1">我是一个div</div>
    </body>
</html>

在这里插入图片描述

分组选择器，意味着，各算各的

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            div, .box1{
                color:red;
            }
            .box1{
                color:blue;
            }
        </style>
    </head>
    <body>
       <div class="box1">我是第一个div</div>
       <div class="box2">我是第二个div</div>
    </body>
</html>

在这里插入图片描述

关系选择器，是针对最后选择的是谁来决定的，和最后选中的前面的元素是没有关系的（也就是该语句对最后选中的元素的前面的元素是没有设置样式的)

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            div{
                color:blue;
            }
            div span{
                color:red;
            }
        </style>
    </head>
    <body>
       <div class="box1">
           我是div
           <span>我是div中的span
               <i>我是span中的i标签</i>
           </span>
       </div>
    </body>
</html>

在这里插入图片描述

上面的关于关系选择器的权重理解有误，具体可以参考下面的“小米商城”左侧导航条中的这个问题来分析和理解

在这里插入图片描述

为什么这个没有顶到右边去呢？

在这里插入图片描述

打开工具开始检查

在这里插入图片描述

原来是前面的样式设置中，给a设置了外边距的问题，为了不让前面的样式对后面产生影响，可以使用样式重置的方法去解决这个问题

在这里插入图片描述

样式重置了，但是，还是没有解决问题

考虑是样式重置的问题，打开调试工具可以看到

在这里插入图片描述

这反应了一个问题.nav-wrapper li a的权重，大于.left-menu a的权重，进一步可以确定上面用到的是关系选择器，对于非分组选择器的样式权重问题，即使是关系选择器，它的权重也要进行相加计算来比较

在这里插入图片描述

为了解决上述问题，我们可以将.left-menu a修改为.nav .left-menu a

在这里插入图片描述

给下面设置hover时

在这里插入图片描述

如果我这样设置，发现却没有生效

在这里插入图片描述

但是，这句话却生效了

在这里插入图片描述

没有生效的那句话，是因为那句话的结束语是li然后再给的hover,后面没有另外加承受对象，因此.nav .left-menu li:hover{中的color的设置，还是涉及到继承的问题，这就导致了它不能生效，因为.nav-wrapper li a:hover的落脚点是a，受影响的也是a，<所以这里千万不要以为.nav .left-menu li :hover的优先级是比.nav-wrapper li a:hover的优先级高，这是很明显的错误，因为此处他们的落脚点不同，一个是li 一个是hover，这也告诉我们一个道理，要想给文字设置颜色，尽量直接点，尽量不要去利用color的继承，这样比较容易出问题

}

上面告诉我们一个道理，在进行权重计算时，一定要先看看落脚点是否相同

为了解决以上问题，我们可以这样处理

在这里插入图片描述

one or two

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
选择器的权重中对交集选择器，分组(并集)选择器，以及关系选择器的理解

先看如下代码<!DOCTYPE html><html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&g
复制链接

扫一扫