相鄰兄弟選擇器、後代選擇器和子選擇器三者有什麼區別？

王铁柱6發表於2024-11-28

在 CSS 中，相鄰兄弟選擇器、後代選擇器和子選擇器都是用來選擇特定 HTML 元素的，但它們選擇的目標元素和選擇方式有所不同：

  • 子選擇器（>）: 只選擇作為指定父元素直接子元素的元素。換句話說，它只選擇父元素的第一級子元素，不會選擇更深層次的子孫元素。

    <div>
    <p>This paragraph is a direct child.</p>  <!-- 會被選中 -->
    <section>
        <p>This paragraph is a grandchild, not a direct child.</p> <!-- 不會被選中 -->
    </section>
</div>

div > p { color: blue; }

  • 後代選擇器（空格）: 選擇指定元素的所有後代元素，無論它們巢狀的層級有多深。只要是指定元素內部的元素，都會被選中。

    <div>
    <p>This paragraph is a descendant.</p> <!-- 會被選中 -->
    <section>
        <p>This paragraph is also a descendant.</p> <!-- 也會被選中 -->
    </section>
</div>

div p { color: green; }

  • 相鄰兄弟選擇器（+）: 選擇緊跟在指定元素後的第一個兄弟元素。這兩個元素必須擁有相同的父元素，並且被選擇的元素必須直接跟在指定元素之後。

    <div>
    <p>First paragraph.</p>
    <p>Second paragraph (adjacent sibling).</p> <!-- 會被選中 -->
    <p>Third paragraph.</p> <!-- 不會被選中 -->
</div>

p + p { color: red; }

總結：

選擇器 符號 選擇目標
子選擇器 > 直接子元素
後代選擇器 空格 所有後代元素
相鄰兄弟選擇器 + 緊跟其後的第一個兄弟元素

理解這些選擇器的區別對於編寫高效、精準的 CSS 樣式至關重要。 透過選擇正確的選擇器，可以避免不必要的樣式應用，並提高網站的效能。

相關文章