CSS 後代選取器：以空白選取所有層級的後代

後代用空白，會選到底下所有層級；直屬後代用大於符號，只選第一層子元素。需要精準控制層級時用直屬後代。

使用 空白鍵 區隔兩個元素，選取 HTML 文件上特定父層元素下的子元素(最右側)。

以下案例便是利用 後代選取器 將對象選取出來並進行樣式的改變。

與直屬後代的差別

html

<ul class="menu">
  <li>第一層
    <ul>
      <li>第二層</li>
    </ul>
  </li>
</ul>

css

/* 兩層的 li 都會被選到 */
.menu li { color: red; }

/* 只有第一層的 li 會被選到 */
.menu > li { color: red; }

空白代表 底下所有層級的，這也是樣式常常誤傷巢狀元素的原因。需要精準控制層級時，請改用直屬後代選取器。

css

/* ❌ 綁死結構，權重也高 */
.page .content .list ul li a { color: red; }

/* ✅ 一個類別解決 */
.list-link { color: red; }

層數越多，權重越高、日後越難覆蓋，也越禁不起 HTML 結構調整。

後代選取器和直屬後代差在哪？

後代用空白，會選到底下所有層級；直屬後代用 >，只選第一層子元素。需要精準控制層級時用直屬後代。

為什麼樣式會套到不該套的元素上？

因為空白不限層級。巢狀清單或卡片內若有同名元素，就會一起被選到。可以改用直屬後代，或替目標加上專屬類別。

選取器可以串很多層嗎？

可以，但不建議。層數越多權重越高、與 HTML 結構綁得越死，改個標籤就失效。通常一到兩層就夠了。