CSS选择器疑问：如何正确选取.nav类下的所有li元素？

两者不存在绝对的“谁对谁错”，核心差异是作用范围不同，选哪种完全取决于你的样式需求：

1. .nav > li：直接子元素选择器 #

只会匹配.nav元素直接嵌套的<li>子元素，不会影响更深层级的后代<li>。比如下面的结构里，只有第一级<li>会被选中：

<div class="nav">
  <li>直接子项（会被选中）</li>
  <li>
    <ul>
      <li>嵌套的孙子项（不会被选中）</li>
    </ul>
  </li>
</div>

适合只想给导航的一级列表项设置样式的场景，避免样式“渗透”到内部嵌套列表。

2. .nav li：后代选择器 #

会匹配.nav元素下所有层级的<li>后代，包括直接子元素、孙子元素、甚至更深的层级。同样用上面的结构，两级<li>都会被选中：

<div class="nav">
  <li>直接子项（会被选中）</li>
  <li>
    <ul>
      <li>嵌套的孙子项（也会被选中）</li>
    </ul>
  </li>
</div>

适合需要统一给导航下所有列表项设置基础样式的场景。

总结 #

没有通用的“正确写法”，只需要根据你的实际需求选择：

• 仅需作用于直接子列表项 → 用.nav > li
• 需作用于所有层级列表项 → 用.nav li

不同网站说法不一致，本质是它们针对的场景不同，不存在谁对谁错，只要匹配你的需求就是合适的选择。

内容的提问来源于stack exchange，提问作者Kendeas Harris