初學者指南：CSS 子元素選擇器與後代選擇器的差異

更新日期： 2024 年 10 月 23 日

在撰寫 CSS 時，為了精確控制樣式的應用，我們經常需要選擇特定的 HTML 元素。

兩個常用的選擇器是子元素選擇器和後代選擇器。

這兩者雖然都用來選擇 HTML 元素，但它們的作用範圍和行為存在重要的差異。

本文將為新手介紹 CSS 子元素選擇器與後代選擇器之間的區別，並通過範例說明如何在實際開發中使用它們。

什麼是 CSS 後代選擇器？

後代選擇器（Descendant Selector）是用來選擇某個元素，內部的所有後代元素。

後代元素指的是，位於另一個元素內部的任意層級的元素，而不僅僅是它的直接子元素。

後代選擇器的語法

A B {
    /* 樣式規則 */
}

• A：父級或祖先元素
• B：A 元素內的任意後代元素，無論它位於 A 的第幾層

後代選擇器的範例

div p {
    color: blue;
}

這段樣式會將 div 內所有的 p 元素的文字設置為藍色，不管這些 p 元素在 div 裡面嵌套了多少層。

<div>
    <p>這是藍色的段落文字。</p>
    <div>
        <p>這也是藍色的段落文字，儘管它被嵌套在另一個 div 中。</p>
    </div>
</div>

在這個範例中，所有在 div 內部的 p 元素都會應用藍色文字樣式，無論 p 是直接位於 div 中，還是嵌套在其他元素中。

什麼是 CSS 子元素選擇器？

子元素選擇器（Child Selector）是用來選擇某個元素的直接子元素，也就是說，這些元素必須是父級元素的第一層子元素，不能是嵌套在更深層次的後代元素。

子元素選擇器的語法

A > B {
    /* 樣式規則 */
}

• A：父級元素
• B：A 的直接子元素，必須是 A 的第一層子元素

子元素選擇器的範例

div > p {
    color: red;
}

這段樣式只會將 div 的直接子元素 p 的文字設置為紅色。

<div>
    <p>這是紅色的段落文字。</p>
    <span>
        <p>這段文字不會變紅，因為它不是 div 的直接子元素。</p>
    </span>
</div>

在這個範例中，只有位於 div 的第一層的 p 元素會變成紅色，而嵌套在其他元素內的 p 元素不會受到影響。

後代選擇器與子元素選擇器的差異

層級限制

• 後代選擇器：選擇父級元素中的所有後代元素，無論它們被嵌套了多少層。
• 子元素選擇器：只能選擇父級元素的第一層子元素，不能選擇嵌套在更深層的元素。

範例對比：

/* 後代選擇器 */
div p {
    color: blue;
}

/* 子元素選擇器 */
div > p {
    color: red;
}

在這裡，div p 會將所有 div 內的 p 元素變成藍色，而 div > p 只會將 div 的直接子元素 p 變成紅色。

使用場景

• 後代選擇器：適合用於需要選擇父級內所有指定元素的情況，無論它們嵌套了多少層。
  
  例如，當你想要為頁面中的所有段落文字應用樣式時，後代選擇器非常有用。
• 子元素選擇器：適合用於需要精確控制樣式應用範圍，只針對直接子元素的情況。
  
  例如，當你只想為特定容器內的第一層子元素應用樣式時，使用子元素選擇器能避免不必要的樣式應用。

如何選擇使用子元素選擇器還是後代選擇器？

1. 如果你需要應用樣式到某個容器內的所有後代元素，應該使用後代選擇器。 範例：

   section p {
       color: green;
   }

在這裡，section p 將選擇所有位於 section 內的 p 元素，不管它們被嵌套了多少層。

2. 如果你只需要應用樣式到某個容器內的直接子元素，應該使用子元素選擇器。 範例：

   section > p {
       color: green;
   }

在這裡，section > p 只會選擇 section 元素的第一層子元素 p，而不會影響被嵌套的 p 元素。

範例總結

以下範例總結了子元素選擇器和後代選擇器的不同行為。

範例：後代選擇器

div p {
    color: blue;
}

<div>
    <p>這是藍色的段落。</p>
    <div>
        <p>這也是藍色的段落。</p>
    </div>
</div>

解釋：無論 p 是否是 div 的直接子元素，只要它位於 div 中，它都會變成藍色。

範例 2：子元素選擇器

div > p {
    color: red;
}

<div>
    <p>這是紅色的段落。</p>
    <div>
        <p>這段文字保持默認顏色，因為它不是直接子元素。</p>
    </div>
</div>

解釋：只有第一層的 p 元素會變成紅色，嵌套的 p 元素不受影響。

六、結語

CSS 的子元素選擇器和後代選擇器是兩個強大的工具，能幫助你精確地選擇頁面中的元素並應用樣式。理解這兩者之間的差異，能讓你更靈活地控制樣式的應用範圍。

在實際開發中，應根據具體需求來選擇使用哪一種選擇器。

如果需要應用樣式到所有後代元素，後代選擇器是最佳選擇；如果只想控制樣式在直接子元素上的應用，則應選擇子元素選擇器。

掌握這些技巧後，你將能夠編寫出更加高效且可控的 CSS 代碼。

參考資料

• MDN Web Docs – Descendant combinator
• MDN Web Docs – Child combinator