您的位置：首页 > 其它

交集选择器与并集选择器

2017-03-31 16:47 344 查看

交集选择器：

数学中：

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

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.

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

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

2.

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

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航