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

Question

  

可能重复：
  What does “>” mean in CSS rules?

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

div span

div > span

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

Answer 1

不，他们不等同。第一个是descendant selector，第二个是child selector。

快速举例：

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

使用此标记.a > .c将不会选择任何内容，而.a .c和.a > .b > .c将选择最内层的元素。

Answer 2

div span

将选择任何div内的任何跨度。这可能是多层次的。

div > span

只会选择任何div作为div的直接后代。 有关儿童选择器的更多信息 - ＆gt; http://meyerweb.com/eric/articles/webrev/200006b.html