选择既要满足div元素又要满足 类名为abc的元素
即只要这个元素：< div class=“abc”>我爱学习2< /div >变红，无论是单独使用div标签选择器还是单独使用 ".abc"类选择器都无法实现只让< div class=“abc”>我爱学习2< /div >变红,所以要用并集选择器
当你同时选择了标签选择器，和类选择器时，标签选择器放在前，类选择器在后，在交集选择器中，选择器之间没有空格直接挨着（选择器间的位置不能互换，如交集选择器rdiv.abc{} ，互换位置后就是一个纯类名选择器.abcrdiv{} ）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>交集选择器</title>
<style type="text/css">
div.abc{
color: red;
}
</style>
</head>
<body>
<!--交集选择器：-->
<!--1.交集选择的元素要同时满足多个条件（俩个条件就足够了）-->
<!--2.选择器间没有空格。-->
<!--3.标签选择器放在前，类选择器在后（位置不能互换）-->
<div >我爱学习1</div>
<div class="abc">我爱学习2</div>
<p class="abc">我爱学习3</p>
</body>
</html>
交集选择器都选用类的情况
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>交集选择器</title>
<style type="text/css">
.one.abc{
color: red;
}
</style>
</head>
<body>
<!--交集选择器：-->
<!--1.交集选择的元素要同时满足多个条件（俩个条件就足够了）-->
<!--2.选择器间没有空格。-->
<!--3.标签选择器放在前，类选择器在后（位置不能互换）-->
<div class="one">我爱学习1</div>
<div class="abc one">我爱学习2</div>
<p class="abc">我爱学习3</p>
</body>
</html>
交集标签指C:有些元素标签既符合要求A又满足要求B
2.选择器间没有空格。
3.标签选择器放在前，类选择器在后（位置不能互换）
