【问题标题】：Is `div > a` the same thing as `div a`?`div > a` 和 `div a` 一样吗？
【发布时间】：2013-01-29 03:04:42
【问题描述】：

在 CSS 中，选择器 div > a 和 div a 是否相同？

<div>
  <a>Hi</a>
</div>

【问题讨论】：

不。 w3.org/TR/CSS2/selector.html
@close voters：如果你愿意，可以投反对票，但投票结束是没有意义的。这绝对是一个真实的问题（虽然措辞不佳），而且绝对是话题。

标签： css html css-selectors

【解决方案1】：

不是。 “div > a”是child selector；它的意思是“一个a 元素，它是div 的直接子代”。 “div a”是descendant selector；它的意思是“一个a 元素，它是div 的后代”（一个孩子，或者一个孩子的孩子，或者一个孩子的孩子的孩子，......）。当然，所有子元素都是后代；但并非所有后代都是孩子。

例如：

<div>
  <a href='http://www.google.com'>Google</a>
</div>

同时匹配div > a 和div a（a 是div 的子元素，当然所有子元素也是后代元素）。

但是：

<div>
  <span>
    <a href='http://www.google.com'>Google</a>
  </span>
</div>

...不匹配 div > a 但匹配 div a，因为 a 是后代，但不是直接子代（中间有一个 span） .

Live example

【讨论】：

哦，那么 "div > a" 如果 "" 在另一个 "" 中就行不通了？
@funk-shun：没错。事实上，我只是为此添加了一个示例。

【解决方案2】：

不是。

<div><h1><a>some text</a></h1></div>

在上面的 HTML 中，div > a 不会选择 <a>，因为它不是 <div> 的直接子代。

【讨论】：

【解决方案3】：

They're not the same.

【讨论】：

...因为阅读手册往往和看油漆变干一样吸引人。 w3c 还不错，但我使用ECMA Script 来帮助我入睡。
@funk-shun，听说过 JavaScript 吗？

【解决方案4】：

不，它们不一样。第一个只选择div 元素的children 的a 元素，而第二个选择div 元素的后代的所有a 元素，例如<div><p><a>...</a></p></div>.

【讨论】：