【16】CSS基礎（2）——選擇器②高階選擇器
★文章內容學習來源：拉勾教育大前端就業集訓營
【16】CSS基礎（2）——選擇器②高階選擇器
目錄#接上篇
產生背景：
由於基礎選擇器不能實現所有選擇情況，比如：不想選擇所有標籤…class標籤定義過多…如何：儘量少的類名還能儘量選擇多的標籤?所以後期在基礎選擇器的基礎上衍生出了幾種高階選擇器。
組成：
高階選擇器的組成部分是基礎選擇器。
★高階選擇器★
(一）後代選擇器
1.含義及示例：
（1）也叫包含選擇器；
（2）通過標籤之間存的巢狀關係（族譜關係）去選擇元素，基本組成部分就是基礎選擇器；
（3）★書寫方式∶空格表示後代，基礎選擇器中間使用空格分隔，空格前面的選擇器選中的標籤必須是後面選擇器選中標籤的祖先級。
★注意∶ 後代選擇器必須滿足所有的後代關係才能夠被選中，後代關係不一定只能是父子關係，只要前面的是後面的祖先級即可。
示例
<DOCTYPE html>
<html>
<head>
<title>後代選擇器/包含選擇器示例</title>
<style>
.usual .exercise .run {
font-size: 24px; 
2.特點
優點∶
減少class 屬性的定義使用，選擇效率更高。
-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --
(二）交集選擇器
1.含義及示例：
（1）通過一個標籤之上滿足所有的基礎選擇器的需求去選擇標籤；
（2）★書寫方式∶基礎選擇器進行連續書寫，如果有標籤選擇器參與交集，必須書寫在開頭；
★交集選擇器更多寫法：
①交集選擇器可以進行類名的連續交集，需要滿足更多的條件才能選中標籤；
②IE6 不支援類名連續交集寫法。
（3）選擇範圍∶選擇的是滿足所有基礎選擇器需求的標籤，如果一個條件不滿足都不能被選中；（跟數學中的交集概念一樣）
（4）比較常見的是標籤與類的交集。
示例
<DOCTYPE html>
<html>
<head>
<title>交集選擇器示例</title>
<style>
p.carrot {
color:coral; /*字型顏色*/
}
p.eat.chicken { /*類名的連續交集*/
color: red;
}
div.exercise {
font-weight: bold; /*字型加粗*/
}
.usual .study p.fun { /*最為其它高階選擇器（後代選擇器）的組成部分*/
color: pink;
}
</style>
</head>
<body>
<div class="usual">
<div class="study">
<p class="fun">今天真開心</p>
<p>學習使我快樂</p>
<p>繼續加油</p>
</div>
<div class="exercise">
<p>今天做了瑜伽</p>
<p class="run">跑了步</p>
</div>
<div class="diet">
<p class="eat chicken">今天吃了大盤雞</p>
<p class="eat carrot">喝了胡蘿蔔汁</p>
</div>
</div>
</body>
</html>
2.特點/用途
（1）交集選擇器可以作為其他高階選擇器的組成部分。
-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -
（三）並集選擇器
1.含義及示例：
（1）不同選擇器選中的元素都要設定相同的樣式，多次書寫相同的樣式屬性對程式碼造成浪費，可以將前面六種選擇器可以進行並集書寫，相當於一種簡化寫法；
（2）書寫方式∶將多個選擇器中間用逗號進行分隔，最後一個後面不能加逗號；
（3）選擇範圍∶是所有的單獨選擇器選中的標籤的並集集合。
示例
<DOCTYPE html>
<html>
<head>
<title>並集選擇器示例</title>
<style>
.exercise,.run {
color: red;
}
</style>
</head>
<body>
<div>
<div>
<p >今天真開心</p>
<p>學習使我快樂</p>
<p>繼續加油</p>
</div>
<div class="exercise">
<p>今天做了瑜伽</p>
<p class="run">跑了步</p>
</div>
<div>
<p>今天吃了大盤雞</p>
<p>喝了胡蘿蔔汁</p>
</div>
</div>
</body>
</html>
2.特點/用途
（1）如果多個標籤具有公共樣式，但是不能用一個選擇器選中，可以使用並集寫法；
（2）可以使用標籤選擇器的並集寫法，進行預設樣式的清除，替換萬用字元的功能。（如下圖片段程式碼）
h2,body,ul,li,p {
margin: 0;
paddding: 0
}
★下篇繼續：CSS基礎（2）——選擇器③選擇器權重…