並集和交集選擇器
這一節我們介紹另外兩個“複合選擇器”，並集選擇器和交集選擇器。
複習一下上一講的“子代選擇器”，看下面的例子，要求將“上級菜單”置爲紅色。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>子代選擇器</title>
</head>
<body>
<ul>
<li
<a href="#">上級菜單</a>
<ul>
<li>
<a href="#">下級菜單</a>
</li>
</ul>
</li>
</ul>
</body>
</html>
要是簡單的將Style中的選擇器寫成“ul > li > a”則會將“一級菜單”和“二級菜單”都置爲紅色，正確的解法如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>子代選擇器</title>
<style>
.father > li > a{
color:red;
}
</style>
</head>
<body>
<ul class="father">
<li>
<a href="#">上級菜單</a>
<ul>
<li>
<a href="#">下級菜單</a>
</li>
</ul>
</li>
</ul>
</body>
</html>
- 並集選擇器
並集選擇器（集體聲明）是各個選擇器通過逗號連接而成的，任何形式的選擇器（包括標籤選擇器、類選擇器、id選擇器等等）都可以作爲並集選擇器的一部分，如果某些選擇器定義的樣式完成相同，或者部分相同，就可以利用並集選擇器爲他們定義相同的CSS樣式。
比如下面的例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>並集選擇器</title>
<style>
div,p,span{
color: red;
}
</style>
</head>
<body>
<div>並集選擇器</div>
<p>並集選擇器</p>
<span>並集選擇器</span>
<h3>並集選擇器</h3>
<a href="#">並集選擇器</a>
</body>
</html>
簡單理解，並集選擇器就是“和”的意思，只需要用逗號隔開即可。相對而言，並集選擇器比較常用。
2、交集選擇器
交集選擇器由兩個選擇器組成，其中第一個爲標籤選擇器，第二個爲class選擇器，兩個選擇器之間不能有空格，比如下面例子裏面的 “div.current”。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>交集選擇器</title>
<style>
div.current{
color: red;
}
</style>
</head>
<body>
<div class="current">交集選擇器</div>
<p class="current">交集選擇器</p>
</body>
</html>
交集選擇器是並且的意思，簡單理解成既…又…的意思。相對而言，交集選擇器的使用情境較少。