1. 組合選擇器的類型
CSS 組合選擇器可以根據元素之間的層次關係選擇元素，這讓它們在需要根據上下文應用樣式或需要處理複雜結構元素時特別有用。組合選擇器是一種強大的工具，當單一 class 或 id 不夠用時，可以精確選擇目標元素。我們來看幾種主要的 CSS 組合選擇器類型，包括後代選擇器、子元素選擇器、相鄰兄弟選擇器和一般兄弟選擇器。
CSS 的組合選擇器包含了基於 HTML 層級結構選擇元素的不同方式。主要的組合選擇器類型有：
- 後代選擇器（Descendant Selector）：選擇位於另一元素內的所有元素，無論它們是多深的嵌套層級。
- 子元素選擇器（Child Selector）：僅選擇特定元素的直接（緊鄰的）子元素。
- 相鄰兄弟選擇器（Adjacent Sibling Selector）：選擇在同一層級中緊接在另一元素之後的元素。
- 一般兄弟選擇器（General Sibling Selector）：選擇在指定元素之後的所有同層級元素。
這些選擇器適用於不同的場合，可以根據元素在頁面上的位置準確地選擇目標元素。
2. 後代選擇器（Descendant Selector）
後代選擇器會選擇某個元素內的所有元素，無論嵌套層級有多深。使用時，選擇器之間會用空格分隔。這種選擇器很實用，例如要為某個 class 的 <div> 中的所有 <p> 元素設置樣式時。
.container p {
color: blue;
}
<div class="container">
<p>這段文字會是藍色，因為它位於容器中。</p>
<div>
<p>這段文字也會是藍色。</p>
</div>
</div>
<p>這段文字不會變色，因為它不在容器內。</p>
這裡的選擇器 .container p 會選擇所有位於類名為 container 的元素內的 <p> 元素，包括任何嵌套層級內的元素。
3. 子元素選擇器（Child Selector）
子元素選擇器僅選擇元素的直接子元素，選擇器之間用符號 > 分隔。這種選擇器適合僅對第一層嵌套的元素應用樣式，而不影響更深層次的元素。
.container > p {
font-weight: bold;
}
<div class="container">
<p>這段文字會變成粗體。</p>
<div>
<p>這段文字不會變，因為它不是 container 的直接子元素。</p>
</div>
</div>
這裡只有第一個 <p> 會變成粗體，因為它是 .container 的直接子元素，而嵌套的 <p> 不會有變化。
4. 相鄰兄弟選擇器（Adjacent Sibling Selector）
相鄰兄弟選擇器選擇的元素必須緊接在另一元素之後，且在同一層級中。這種選擇器用符號 + 分隔選擇器，適合為緊鄰另一元素的元素（如標題後的第一段文字）應用樣式。
h2 + p {
color: green;
}
<h2>標題</h2>
<p>這段文字會變成綠色，因為它緊接在標題後。</p>
<p>這段文字不會變，因為它不是 h2 的緊鄰元素。</p>
這裡的選擇器 h2 + p 只會改變第一個 <p> 的顏色，因為它緊接在 <h2> 後面。
5. 一般兄弟選擇器（General Sibling Selector）
一般兄弟選擇器選擇的是在某元素之後的所有同層級元素，無論它們是否與這個元素相鄰。這種選擇器用符號 ~ 來分隔選擇器。
h2 ~ p {
font-style: italic;
}
<h2>標題</h2>
<p>這段文字會變成斜體。</p>
<div>
<p>這段文字也會變成斜體，因為它是 h2 的兄弟元素。</p>
</div>
在這個例子中，選擇器 h2 ~ p 會選擇所有位於 <h2> 之後的 <p> 元素，無論中間有沒有其他元素。
6. 使用所有組合選擇器的範例
下面是一個包含所有組合選擇器的 HTML 和 CSS 範例，用於演示如何根據頁面上的位置選擇不同的元素。
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<title>CSS 組合選擇器範例</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<p>段落，為 .container 的後代和子元素。</p>
<div>
<p>段落，為 .container 的後代但不是子元素。</p>
</div>
</div>
<h2>標題</h2>
<p>段落，為 h2 的相鄰兄弟元素。</p>
<div>這個塊不會影響接下來的段落。</div>
<p>段落，為 h2 的一般兄弟元素。</p>
</body>
</html>
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<title>CSS 組合選擇器範例</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<p>段落，為 .container 的後代和子元素。</p>
<div>
<p>段落，為 .container 的後代但不是子元素。</p>
</div>
</div>
<h2>標題</h2>
<p>段落，為 h2 的相鄰兄弟元素。</p>
<div>這個塊不會影響接下來的段落。</div>
<p>段落，為 h2 的一般兄弟元素。</p>
</body>
</html>
/* 後代選擇器 */
.container p {
color: blue;
}
/* 子元素選擇器 */
.container > p {
font-weight: bold;
}
/* 相鄰兄弟選擇器 */
h2 + p {
color: green;
}
/* 一般兄弟選擇器 */
h2 ~ p {
font-style: italic;
}
GO TO FULL VERSION