新手指南：CSS 多類別組合選擇器與後代選擇器的區別

更新日期： 2024 年 9 月 14 日

在撰寫 CSS 時，選擇器決定了樣式會應用到哪些元素。

兩種常見的選擇器是「多類別組合選擇器」（如 .class1.class2）和「後代選擇器」（如 .parent .child）。

理解它們的差異，有助於更有效地設計網頁佈局。

多類別組合選擇器（.class1.class2）

這種選擇器應用於同時擁有兩個（或多個）類別的元素。

換句話說，元素必須同時具備 .class1 和 .class2 才會被選中。

例子

.button.primary {
  background-color: blue;
  color: white;
}

<button class="button primary">主要按鈕</button>
<button class="button">普通按鈕</button>

在這個例子中，只有同時具備 .button 和 .primary 類別的按鈕會應用樣式，另一個沒有 .primary 的按鈕則不會受到影響。

後代選擇器（.parent .child）

後代選擇器應用於那些位於特定父元素內的子元素。

換句話說，它會選擇位於 .parent 內的所有 .child 元素。

例子

.container .item {
  border: 1px solid black;
}

<div class="container">
  <div class="item">項目 1</div>
  <div class="item">項目 2</div>
</div>
<div class="item">項目 3</div> <!-- 不會被選中 -->

在這個例子中，只有那些位於 .container 內的 .item 元素會被選中並應用邊框樣式。位於 .container 外的 .item 元素不會受到影響。

多類別組合選擇器與後代選擇器的差異

應用範圍：

多類別組合選擇器針對同一個元素，需要同時具備多個類別。後代選擇器針對父元素內的子元素，選擇某個範圍內的元素。

關係性：

多類別組合選擇器中，選中的元素必須同時具有所有指定的類別。後代選擇器則是基於元素的嵌套關係，子元素需位於指定的父元素內。

何時使用？

多類別組合選擇器：

當你希望為特定元素應用更具體的樣式，且該元素具備多個類別時（例如按鈕的不同狀態：primary、secondary）。

後代選擇器：

當你希望僅針對某個父元素內的特定子元素應用樣式時（例如在一個區塊內應用不同的子項目樣式）。

結語

多類別組合選擇器和後代選擇器是 CSS 中強大的工具，它們可以幫助你精確控制樣式的應用範圍。

理解它們之間的區別，能幫助你更靈活地設計頁面佈局，創建更加結構化和有條理的樣式表。