为什么在使用子选择器时table> tr> td不起作用？

Question

我无法理解为什么以下选择器按预期工作(即获取td):

table tr td

但这个没有:

table > tr > td

它td是后代tr,后者又是后代table,但他们也是彼此的孩子.因此,我认为>选择器也可以工作.

我做了两个小提琴:

1. 孩子:http://jsfiddle.net/brLee/
2. 后裔:http://jsfiddle.net/brLee/1/

为什么>选择器不在这里工作？

Answer 1

在HTML中,浏览器隐式添加一个tbody元素,在其中包含tr元素¹,所以实际上,tr它永远不是一个孩子table.

因此,您必须这样做:

table > tbody > tr > td

当然,如果您tbody自己添加元素,则使用相同的选择器.该规范解释了何时tbody隐式添加a :

标签遗漏

如果tbody元素中的第一个tbody元素是tr元素,并且元素不是紧跟在其前面的元素tbody thead,或者tfoot省略了结束标记的元素,则可以省略元素的开始标记.

¹ _{然而,对于XHTML文档而言,情况并非如此application/xhtml+xml,因为它的XML根源是正确的.}