混淆了两种不同的CSS语法来选择嵌套元素

Question

可能重复:
CSS规则中的">"是什么意思？

CSS有以下两种语法似乎在做同样的事情.选择嵌套元素.

div span

div > span

我错过了什么,或者这两个确实是等同的选择器？

Answer 1

不,他们不等同.第一个是后代选择器,第二个是子选择器.

快速举例:

<div class="a">
  <div class="b">
    <div class="c"></div>
  </div>
</div>

有了这个标记.a > .c将选择什么,而.a .c和.a > .b > .c将选择最里面的元素.