交集选择器与并集选择器

原创已于 2022-07-06 15:04:06 修改 · 3.1w 阅读

16 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#java #servlet #jvm

于 2017-03-31 16:47:20 首次发布

CSS新手学习专栏收录该内容

13 篇文章

订阅专栏

本文介绍了CSS中的交集选择器和并集选择器。交集选择器用于选择同时具备多个特定属性的标签，例如`标签1标签2`，而并集选择器则选择满足任一属性的标签，用逗号分隔，如`标签1, 标签2`。文中通过实例详细解释了两种选择器的工作原理，并指出在实际企业开发中它们的使用频率不高。" 70804709,6606968,Linux脚本自动化创建并激活swap分区,"['Linux', '虚拟机', '脚本自动化']

交集选择器：

数学中：

区域一和区域二共同拥有的部分为区域三，则区域三就为区域一和区域二的交集。

css中：

标签一和标签二相同的部分就为交集选择器。系统所找到的标签必须满足：既有标签一的特点，也有标签二的特点。

<style>

标签一标签二{

属性：值；

}

</style>

系统找到的标签为：

1、<标签一 id="标签二">

或 2、<标签一 class="标签二">

或 3、<标签 id="标签一" class="标签二">

格式：
标签1标签2{

属性;值;

}

标签1与标签2之间什么也没有。

特例：

标签1标签2标签3{

color:red;

}

先找到所有的标签1代码，再从所有的标签1代码中找到所有的符合标签2特性的标签代码，再从所有的既符合标签1又符合标签2的标签中找到所有再次符合标签3的标签代码。

（也就是最后找到的标签里面的属性：标签1、标签2、标签3、标签4的特性都要符合，标签1是标签名，标签2是id名，标签3是class名，那么最后的标签就为：<标签1 id="标签2" class="标签3"></标签1>）

例子：

将标签名为<p>，类名为xxx的标签中的内容变成红色。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>交集选择器</title>
        <base target="_self">
        <style type="text/css">
            p.xxx{
                color: red;
            }
        </style>
    </head>
<body>

        <p>我是段落</p>
        <p class="xxx">我是段落</p>
        <p>我是段落</p>
        <p class="xxx">我是段落</p>
        <p>我是段落</p>
</body>
</html>

并集选择器

数学中：

区域一与区域二并在一起就是区域三。（区域一+区域二=区域三）

css中：

并集选择器就是选择所有的满足标签1，或者满足标签2的标签，然后对其进行修饰。

格式：

标签1,标签2{

属性:值;

}

（标签1与标签2使用，分开的）

意思是：系统先找到所有的标签1，再找到所有的标签2，然后将所有的标签1和标签2集中做修饰。

例子：

修饰所有的<p>中的内容的颜色，使得这些内容都变成红色。

方法一：（设置不同的类名）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>交集选择器</title>
        <base target="_self">
        <style type="text/css">
            .xxx{
                color: red;
            }
            .xxxx{
                    color: red;
                }
            .xxxxx{
                color: red;
            }
        </style>
    </head>
<body>

        <p class="xxx">我是段落</p>
        <p class="xxxx">我是段落</p>
        <p class="xxxxx">我是段落</p>
</body>
</html>

方法二：（设置相同的类名）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>交集选择器</title>
        <base target="_self">
        <style type="text/css">
            .xxx{
                color: red;
            }
        </style>
    </head>
<body>

        <p class="xxx">我是段落</p>
        <p class="xxx">我是段落</p>
        <p class="xxx">我是段落</p>
</body>
</html>

方法三：（设置不同的id名）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>交集选择器</title>
        <base target="_self">
        <style type="text/css">
            #xxx{
                color: red;
            }
            #xxxx{
                color: red;
            }
            #xxxxx{
                color: red;
            }
        </style>
    </head>
<body>

        <p id="xxx">我是段落</p>
        <p id="xxxx">我是段落</p>
        <p id="xxxxx">我是段落</p>
</body>
</html>

重点：：方法四：（使用并集选择器）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>交集选择器</title>
        <base target="_self">
        <style type="text/css">
            .xxx,.xxxx,.xxxxx{
                color: red;
            }
        </style>
    </head>
<body>

        <p class="xxx">我是段落</p>
        <p class="xxxx">我是段落</p>
        <p class="xxxxx">我是段落</p>
</body>
</html>

交集选择器与并集选择器：

在企业开发中都不怎么经常用。

交集选择器：格式中标签与标签之间没用任何东西，

交集选择器选择出符合和满足各个标签属性的标签：如：标签1标签2标签3{属性：值；} 最终找到同时满足标签1，标签2，标签3的标签。

并集选择器：格式中中，分隔开。格式：标签1，标签2{属性：值；}

并集选择器是用来找出所有的满足和符合标签1或标签2的标签。如：标签2，标签2，标签3{ 属性：值；}，最终系统找出所有的满足标签1或标签2或标签3的标签。满足标签1的标签数量+满足标签2的标签数量+满足标签3的标签数量=系统选出的标签数量。