CSS：CSS選擇器之【組合選擇器】
前言
組合使用不同的選擇器可以匹配更特定的元素。有的複合選擇器能將目標樣式應用到更多元素，有的複合選擇器則會鎖定更少元素，總之會讓你的選擇非常具體。複合選擇器主要包括：群組選擇器、後代選擇器、子選擇器和同級元素選擇器。
群組選擇器
群組選擇器的使用範疇是，多個選擇器使用同一個樣式或者同一組樣式。這在做CSS樣式初始化，CSS框架設計以及後期CSS程式碼優化時會經常使用。多個選擇器之間用逗號（,）隔開，其語法形式為：<選擇器1>,<選擇器2>，<選擇器3> { 定義樣式 }；v程式碼示例如下：
<!DOCTYPE html>
<html 後代選擇器
後代選擇器是對某元素所巢狀的指定元素進行選擇，每個選擇符之間用空格進行分割，多個巢狀層次應該以多個空格進行分割（多層巢狀難免會增加選擇器帶來高權重，這樣在處理一些元素的特殊樣式的時候會帶來些困難，所以在實際開發中我們還是應該避免出現多層巢狀的後代選擇器的存在），示例如下：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8" 上述示例中可以看到，後代選擇器的選擇可以是間接後代，也可以是直接後代，其中p為間接後代，span為直接後代，每一代之間使用空格隔開，我們可通過此方式找到更為複雜巢狀下的元素並設定樣式。
子選擇器
子選擇器區別與後代選擇器的地方就是，後代選擇器可以選擇巢狀在標籤內部任意層級的標籤元素，而子選擇器只能選擇當前標籤往內一層的元素，即子選擇器只能匹配直接後代，通俗一點，就是隻能匹配兒子輩，不能匹配孫子輩。每個選擇符之間用“>”進行分割。示例如下：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Example</title>
<style type="text/css">
/*子選擇器*/
div>p {
color: red;
}
</style>
</head>
<body>
<div>
<p>文字內容01</p>
</div>
</body>
</html>同級元素選擇器
該選擇器能選定當前選擇器同級的其它指定選擇器，平時雖使用的不多，但配合偽類選擇器經常可以做出一些很有“新意”的效果，也能減少對JavaScript的依賴。同級元素有兩種，即“+”和“~”。該選擇器的示例我將會用到偽類選擇器中的:hover，其作用是當滑鼠懸浮在目標上會被觸發，具體的會在後續文件中介紹。
【+】同級元素選擇器
“+”只能選擇該選擇器相鄰的下一個選擇器，示例如下：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Example</title>
<style type="text/css">
.sender {
background-color: black;
width: 50px;
height: 50px;
/*設定圓角，50%表示將該元素切割成一個圓*/
border-radius: 50%;
}
/*同級元素選擇器‘+’*/
.sender:hover + .text_1 {
color: blue;
/*加粗粗細，bolder為更粗*/
font-weight: bolder;
}
.sender:hover + .text_2 {
color: blue;
font-weight: bolder;
}
</style>
</head>
<body>
<div class="sender"></div>
<p class="text_1">文字內容01</p>
<p class="text_2">文字內容02</p>
</body>
</html>這裡對上述選擇器的寫法做一些宣告，其中.sender:hover的作用是，首選找到.sender類選擇器，然後為其設定一個懸浮的偽類選擇器（hover），後面的+就表示找其對應的同級元素選擇器了。執行程式我們可以發現，當滑鼠懸浮在黑色圓球上時，第一段文字會做一些樣式的變化，第二段文字不會。
【~】同級元素選擇器
“~”能選擇該選擇器後的所有同級選擇器。同樣使用上述案例，我們僅僅只需要將選擇器中的 + 替換成 ~ 即可，執行程式我們會發現，兩段文字內容都會做樣式的改變。