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

最新推荐文章于 2025-02-11 14:11:22 发布

one or two

最新推荐文章于 2025-02-11 14:11:22 发布

阅读量978

点赞数 1

文章标签： css html

本文链接：https://blog.youkuaiyun.com/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>