CSS 直屬後代選取器 >：只選第一層子元素

巢狀結構中只想改最外層的時候。像多層選單、巢狀清單、樹狀結構，用空白會把每一層都改到，只有大於符號能限制在第一層。

使用方式與後代選取器相似，在特定父層與子層元素中間使用 > 進行區隔，即可選取 HTML 文件上特定父層元素的 下一層元素。

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

小提醒

由於 > 是選取子元素，位於下一層之後的元素便不會再進行選取了。也就是說 <div> 內的 <p> 並不是這次的選取對象。

對照範例

html

<div class="box">
  <p>我是第一層</p>
  <div>
    <p>我是第二層</p>
  </div>
</div>

css

.box > p { color: red; }   /* 只有第一層變紅 */
.box p   { color: red; }   /* 兩層都變紅 */

多層選單只想改最外層時，> 是唯一乾淨的作法：

css

/* 只有第一層選單項目加分隔線 */
.menu > li {
  border-bottom: 1px solid #eee;
}

小提醒

由於 > 是選取子元素，位於下一層之後的元素便不會再進行選取了。也就是說 <div> 內的 <p> 並不是這次的選取對象。

什麼情況一定要用直屬後代？

巢狀結構中只想改最外層的時候。像多層選單、巢狀清單、樹狀結構，用空白會把每一層都改到，只有 > 能限制在第一層。

大於符號前後要不要空白？

兩種寫法都合法，加空白可讀性較好，多數格式化工具也會自動補上。

可以連續使用多個大於符號嗎？

可以，代表逐層往下。不過層數一多就與結構綁死了，通常改用類別會更好維護。