CSS 選擇器中「>」符號含義詳解：子代組合器而非 JavaScript

代碼片段

.nav > li > a:hover, 
.nav > li > a:focus, 
.navbar-nav > li > a:hover, 
.navbar-nav > li > a:focus {
    border-bottom: 2px solid #ffffff;
    border-bottom-left-radius: 2px;
    border-bottom-right-radius: 2px;
}

核心結論

這是 CSS 選擇器，不是 JavaScript 語法。 其中的 > 是 子代組合器 (Child Combinator)，表示直接子元素關係。

詳細解讀

「>」與「空格」的關鍵區別

/* 子代組合器：只選直接孩子 */
.nav > li { color: red; }

/* 後代組合器：選所有嵌套的後代 */
.nav li { color: blue; }

• .nav > li：若 HTML 為 `
  • ...
  `，則不會匹配，因為 li 的父級是 ul，不是 .nav。
• .nav li：會匹配，因為 li 是 .nav 的後代。

實際應用場景

導航欄樣式隔離：確保只給頂層 `

<ul class="nav">
  <li><a href="#">一級菜單</a></li>          <-- 匹配 .nav > li > a
  <li>
    <a href="#">有子菜單</a>
    <ul><li><a href="#">二級菜單</a></li></ul>  <-- 不匹配 (非直接子代)
  </li>
</ul>