CSS交集选择器，并集选择器

快意人生大社畜

已于 2023-07-06 11:41:59 修改

阅读量5.9k

点赞数 5

分类专栏： CSS 文章标签： css 前端 html

于 2022-08-07 10:24:30 首次发布

本文链接：https://blog.csdn.net/weixin_72322475/article/details/126206403

版权

CSS 专栏收录该内容

7 篇文章 1 订阅

订阅专栏

1.交集选择器

只能交两个，第一个是选择器，第二个是class/id

两者之间无空格，无，

<!DOCTYPE html>
<html lang="en">

<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>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    /* 1.类名+class的交集选择器 */
    div.red {

        color: red;

    }

    /* 2.类名+id的交集选择器 */
    div#blue {
        color: blue;
    }
</style>

<body>
    <div class="red">111</div>
    <div id="red">222</div>
    <p class="red">333</p>
    <div id="blue">444</div>

</body>

</html>

结果为

该例子中

1.div.red只控制既是div选择器，又是class为red的文字颜色变为red(color:red；)

所以<div class="red">111</div>满足，111文字变红了

<div id="red">222</div>是div选择器，是id为red,不是class为red,所以不满足

<p class="red">333</p>是class为red,不是div选择器，是选择器p,所以不满足

2.div#blue只控制既是div选择器，又是id为blue的变化

所以<div id="blue">444</div>满足，444文字变蓝了

2.并集选择器

可以并集多个，各个之间用，隔开

<!DOCTYPE html>
<html lang="en">

<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>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    /* 1.类名+class的交集选择器 */
    div.red {

        color: red;

    }

    /* 2.类名+id的交集选择器 */
    div#blue {
        color: blue;
    }

    /* 1.并集选择器 */
    .orange .red,
    .yellow,
    #blue,
    li {
        color: orange;
    }
</style>

<body>
  <!-- 交集选择器 -->
    <div class="red">111</div>
    <div id="red">222</div>
    <p class="red">333</p>
    <div id="blue">444</div>
 <!--并集选择器 -->
    <div class="orange">
        <div class="red">111</div>
        <div class="yellow">222</div>
        <p class="red">333</p>
        <i id="blue">444</i>
    </div>
    <li>555</li>
</body>

</html>

结果为

该例子中

.orange .red,.yellow,#blue,li

.orange和之后的id/class（比如.red,.yellow,#blue等）之间有空格(因为.red,.yellow,#blue属于.orange的子级)

总体是.orange .red（不为交集选择器，只是父子级关系）和.yellow和#blue和li为并集选择器，之间有,隔开

控制.orange选择器里面class为red和class为yellow和id为blue和选择器li的文字颜色变为orange(color:orange;)

3.交集选择器中可以有并集选择器

<!DOCTYPE html>
<html lang="en">

<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>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    /* 1.类名+class的交集选择器 */
    div.red {

        color: red;

    }

    /* 2.类名+id的交集选择器 */
    div#blue {
        color: blue;
    }

    /* 1.并集选择器 */
    .orange .red,
    .yellow,
    #blue,
    li {
        color: orange;
    }

    /* 2.并集选择器中有交集选择器 */
    div.pink,
    h2,
    .green .s1,
    .green #s3 {
        color: pink;
    }
</style>

<body>
    <!-- 交集选择器 -->
    <div class="red">111</div>
    <div id="red">222</div>
    <p class="red">333</p>
    <div id="blue">444</div>
    <!--并集选择器 -->
    <div class="orange">
        <div class="red">111</div>
        <div class="yellow">222</div>
        <p class="red">333</p>
        <i id="blue">444</i>
    </div>
    <li>555</li>
    <!-- 并集选择器中有交集选择器 -->
    <div class="pink">
        <p>111</p>
        <em>222</em>
    </div>
    <div class="pink">333</div>
    <h2>444</h2>
    <div class="green">
        <div class="s1">a</div>
        <div class="s2">b</div>
        <div id="s3">c</div>
    </div>
</body>

</html>

结果为