CSS - 結合器

你好，有抱負的網頁開發者們！今天，我們將要進入CSS結合器的迷人世界。作為你們親切鄰居的計算機老師，我非常興奮能夠帶領你們進行這次旅程。相信我，到了這堂課的結尾，你們將會像專業人士一樣結合CSS選擇器！

CSS - Combinators

什麼是CSS結合器？

在我們深入之前，讓我們先來了解什麼是結合器。在CSS中，結合器是特殊的符號，讓我們能夠在選擇器之間創建關係。它們幫助我們根據元素在文檔樹中的位置來定位特定的元素。把它們想像成給你的CSS超能力的秘密醬汁！

現在，讓我們詳細探討每個結合器。

後代結合器是最簡單且最常見的。它由兩個選擇器之間的空格表示。它選擇指定元素的所以後代元素。

讓我們看一個例子：

<div class="container">
<p>這是容器內的一段文字。</p>
<section>
<p>這是容器內的一個區塊中的一段文字。</p>
</section>
</div>

.container p {
color: blue;
}

在這個例子中，.container內的所有<p>元素將會是藍色，無論它們嵌套得多深。就像是說："嘿，CSS，找到所有容器類的子元素、孫元素或任何後代元素中的段落！"

現在，如果我們想對多個選擇器應用同樣的樣式該怎麼辦？那就是列表結合器派上用場的地方了。它其實不是傳統意義上的結合器，但這是一個有用的技巧。

h1, h2, h3 {
font-family: Arial, sans-serif;
}

這個選擇器將會把Arial字體應用到所有的<h1>、<h2>和<h3>元素上。就像是告訴CSS："嘿，讓所有這些標題類型使用Arial字體！"

子結合器比後代結合器更具體。它只選擇元素的直接子元素。

<ul class="menu">
<li>首頁</li>
<li>關於
<ul>
<li>我們的團隊</li>
<li>我們的歷史</li>
</ul>
</li>
<li>聯繫</li>
</ul>

.menu > li {
font-weight: bold;
}

在這個例子中，只有頂層的<li>元素（首頁、關於、聯繫）會變粗。嵌套的項目（我們的團隊、我們的歷史）不會受影響。就像是說："CSS，只讓.menu的直接子元素變粗！"

相鄰兄弟結合器選擇直接跟在另一個特定元素之後的元素。

<h1>歡迎來到我們的網站</h1>
<p>這是第一段。</p>
<p>這是第二段。</p>

h1 + p {
font-style: italic;
}

在這裡，只有緊接在<h1>之後的第一個段落會被斜體化。就像是告訴CSS："找到緊接在h1旁邊的段落，並將其設為斜體！"

一般兄弟結合器與相鄰兄弟結合器相似，但它不太嚴格。它選擇指定元素的所有兄弟元素。

<h1>我們的產品</h1>
<p>簡介段落</p>
<div class="product">產品 1</div>
<p>描述 1</p>
<div class="product">產品 2</div>
<p>描述 2</p>

.product ~ p {
font-size: 0.9em;
}

在這個情況下，所有跟在.product div後面的<p>元素會有较小的字體大小。就像是說："CSS，找到所有.product元素的兄弟段落，並將它們稍微縮小！"

現在，我們來看看真正有趣的部分。我們可以嵌套結合器來創建更複雜的選擇器！

<div class="container">
<ul>
<li>項目 1</li>
<li>項目 2
<ul>
<li>子項目 2.1</li>
<li>子項目 2.2</li>
</ul>
</li>
<li>項目 3</li>
</ul>
</div>

.container > ul > li ul > li {
color: red;
}

這個選擇器表示："找到是.container的直接子元素的<ul>的直接子元素的<li>，這個<li>又是另一個<ul>的直接子元素的<li>。" 哇！這真是個大嘴，但它允許非常精確的定位。

在我們的例子中，只有"子項目 2.1"和"子項目 2.2"會是紅色。

這裡有一個方便的表格，總結了我們學到的所有結合器：

記住，熟練來自練習！嘗試在你的專案中實驗這些結合器。很快，你將會像真正的網頁魔法師一樣使用CSS！

我希望這個教學對你們有幫助。CSS結合器起初可能看起來有點複雜，但一旦你掌握了它們，它們就是非常強大的工具。持續編程，持續學習，最重要的是，樂在其中！

Credits: Image by storyset