.nav > li 或 .nav li 设置 .nav 类中所有列表的样式

Question

选择 .nav 类中所有 li 项目的正确选择器是哪个？

两者都尝试过，似乎都有效。想知道选择器的正确写法是什么

尝试设置 .nav 类中所有列表项的样式。我知道这是一个基本问题，但所有网站的说法都不同

Answer 1

我认为

.nav li

是最好的。如果您在

<ul>

元素周围使用

<li>

元素，则

.nav > li

不会选择它们，因为它只查找 .nav 元素第一层子元素的 li 元素，而不是所有

<li>

元素在

.nav

类的内容下，阅读有关 css 选择器的这些页面来解释可能会有所帮助：

Answer 2

这取决于您选择所有子项的含义：

.nav li：这称为Deendand组合器，它选择所有具有类
```
li
```
祖先的
```
.nav
```
，无论之间是否有中间层。
.nav > li：这称为子组合器，它只选择
```
.nav
```
下的直接子元素。（例如，
```
.nav > ol > li
```
不会被选中）

.nav li {
  color: red;
}

.nav>li {
  color: blue;
}

<div class="nav">

  <li>Direct Child</li>
  
  <ol>
    <li>Not Direct Child</li>
  </ol>
  
</div>