如何使用它們，為什么
樣式表通過使用所謂的選擇器來引用html中的特定元素。這些選擇器可以是Clsaa，ID，元素本身等。
我們將在本文中重點介紹的選擇器是combinator。
它們以一種方式組合其他選擇器，使它們彼此之間以及文檔中內容的位置具有有用的關系。——MDN網絡文檔
組合器可以通過最大化元素關聯而不會使HTML淹沒來確保css精確。看一下這個例子：
<div> <div> <h1>Team 1</h1> <ul> <li> <div> <h2>Player 1</h2> <ul> <li>Average points per game: 20</li> </ul> </div> </li> </ul> </div> </div>
實際上，此HTML結構不是太復雜。但是，如果團隊中有不止一個球員，或者團隊不止一個，該怎么辦？如果您想為每個球員增加更多統計數據呢？類和ID有效，但是隨著HTML的增長，它可能會限制CSS的靈活性。
隨著網站需求的增長，元素的數量也會增加。元素嵌套得越多，訪問它們就越困難。
當您要對具有共享類的一個或多個元素進行少量調整時，這可能也會有問題。這可能導致您要么創建更多的類或id，要么采用內聯樣式，要么使用!important。
過度使用類和ID還可以在HTML中創建更多的呈現標記，從而為您和其他使用該代碼的人創建更多的工作。組合器通過有效地關聯頁面上的元素，減輕了過分具體的選擇器的負擔和繁重的標記。讓我們深入探討我們可以使用的各種組合器。
相鄰Sibling
該組合器由+符號標識，并選擇提供的標簽旁邊的元素。
h1 + p
上面的示例將選擇p標簽之后的第一個h1標簽。
假設您有一篇博客文章，并且只想使介紹性段落具有紅色背景和白色文本，如下所示：
這是代碼：
p{
font-size: 20px;
}
h1 + p {
background-color: red;
color: white;
padding: 10px;
}
使用相鄰的同級組合器，我們可以僅隔離第一個p標簽并應用我們的樣式。如果我們想對標簽后面的每個標簽應用以上樣式，該怎么辦？在這種情況下，我們可以使用通用的同級組合器。p h1
普通Sibling
該組合器由~符號標識。
h1 ~ p
上面的代碼將選擇位于p我們h1標簽之后的所有標簽。
如果從前面的例子了代碼，并改變h1 + p對h1 ~ p你會得到這樣的：
img選擇器之間還有其他元素（如上述）時，它甚至可以工作。
相鄰的同級組合器不是這種情況。
僅當元素與第一個標簽直接相鄰時，相鄰的同級組合器才起作用。但是，我們可以p在圖像之前添加一個標記（標簽）并為其提供灰色背景：
p {
font-size: 20px;
}
h1 ~ p {
background-color: red;
color: white;
padding: 10px;
}
h1 + p {
background-color: grey;
}
上面的代碼為我們提供了以下結果：
現在我們已經介紹了Sibling，讓我們談談子選擇器。
子選擇器
很簡單，第一個與子相關的組合器就是子組合器。用符號標識的該組合器僅選擇元素的直接子代。>
讓我們在文章右側的博客頁面中添加一個側邊欄，并將它們都包裝在parent中div。邊欄將包含ul下一步要閱讀的內容。li相關內容和無關內容都有兩個。這些每一個都將包含ul的liS的代表物品。第一個ul應該有一個左邊框以將其與主要文章分開，并且沒有列表樣式。嵌套ul的不應具有邊框和默認列表樣式。我們可以使用下面的代碼來實現：
div > ul {
border-left: solid 1px black;
margin-left: 10px;
padding-left: 10px;
list-style: none;
width:300px;
}
通過使用子組合器，我們僅選擇ul作為父項的直接子項（我們的新側邊欄）的標簽div。這會將左邊框和沒有列表樣式應用于ul包含sub ul而不是sub ul本身的標簽。讓我們給父母div一個顯示，flex使我們的文章和側邊欄水平對齊。結果如下：
如您所見，只有直接子項ul具有左邊框，沒有列表樣式。嵌套的uls沒有邊框和默認列表樣式。這些li標簽看起來有些變形。如何使li兩個標簽中的每個標簽ul的底邊距為10px？我們可以使用我們的最后一個組合器，即后代組合器來做到這一點。
后代組合器
這些組合器由選擇器之間的空格標識，并且與子組合器不同，它們不僅引導子對象，而且還指示選擇器的每個后代。
ul li {
margin-bottom: 10px;
}
上面的CSS將10px在每個li標簽下方創建一個邊距，如下所示：
現在，假設我們要對所有文章標題加下劃線，但不對章節標題加下劃線（li由相關文章和無關文章標識）。讓我們使用稍微更指定的后代combinator添加以下CSS 。
ul li ul li {
text-decoration: underline;
}
結果如下所示。
您可能已經注意到在介紹段落下方的位置方便的廣告。這則廣告演示了如何將組合器進一步組合到目標元素。
div div > div > p + p {
color: purple;
font-size: 15px;
}
這組選擇器定位p到與作為p的子級標簽相鄰的所有標簽div。在div被檢索的目標div是這樣的的孩子div包含我們的文章和邊欄。
還在我這兒？
我們使用后代，子級和相鄰的同級組合器來選擇p廣告中的第二個標記div，因此我們可以應用其他樣式。
組合器有助于保持我們的HTML靈活和相對干凈。這篇文章中的所有代碼都可以在該Codepen中找到。隨意擺弄組合器，看看無需使用任何類或ID 即可將樣式推進多遠。
翻譯自：https://medium.com/better-programming/understanding-css-combinators-a36e013b1bed
