Why doesn#39;t table gt; tr gt; td work when using the child selector?(为什么不表gt;trgt;使用子选择器时 td 工作?)
问题描述
我真的不明白为什么以下选择器按预期工作(即获取 td):
I can't really get why the following selector works as expected (i.e. get the td):
table tr td
但这个没有:
table > tr > td
td 是 tr 的后代,而 tr 又是 table 的后代,但它们也是彼此的孩子.因此,我认为 > 选择器也可以.
The td is a descendant of tr, which in turn is a descendant of table, but they are also children of each other. Therefore, I thought that the > selector would work too.
我做了两个小提琴:
- 孩子:http://jsfiddle.net/brLee/
- 后裔:http://jsfiddle.net/brLee/1/
为什么 > 选择器在这里不起作用?
Why isn't the > selector working here?
推荐答案
在 HTML 中,浏览器会隐式添加一个 tbody 元素,其中包含 tr 元素1,所以实际上,tr 绝不是table 的子节点.
In HTML, browsers implicitly add a tbody element within which to contain the tr elements1, so in reality, tr is never a child of table.
因此,您必须这样做:
table > tbody > tr > td
当然,如果您自己添加一个 tbody 元素,则使用相同的选择器.规范解释了tbody<否则隐式添加/code>:
Of course, if you add a tbody element yourself, you use the same selector. The spec explains when a tbody is added implicitly otherwise:
如果 tbody 元素内的第一件事是 tr 元素,并且该元素是不紧跟在 tbody thead 或 tfoot 元素之前,其结束标记已被省略.
Tag omission
A
tbodyelement's start tag may be omitted if the first thing inside thetbodyelement is atrelement, and if the element is not immediately preceded by atbody thead, ortfootelement whose end tag has been omitted.
1 对于正确作为 application/xhtml+xml 提供的 XHTML 文档,情况并非如此,但是,鉴于其 XML 根.
1 This is not the case for XHTML documents that are properly served as application/xhtml+xml, however, given its XML roots.
这篇关于为什么不表>tr>使用子选择器时 td 工作?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!
本文标题为:为什么不表>tr>使用子选择器时 td 工作
基础教程推荐
- Bokeh Div文本对齐 2022-01-01
- Fabric JS绘制具有活动形状的多边形 2022-01-01
- 在 contenteditable 中精确拖放 2022-01-01
- 如何添加到目前为止的天数? 2022-01-01
- 即使用户允许,Gmail 也会隐藏外部电子邮件图片 2022-01-01
- Bootstrap 模态出现在背景下 2022-01-01
- npm start 错误与 create-react-app 2022-01-01
- fetch 是否支持原生多文件上传? 2022-01-01
- 原生拖动事件后如何获取 mouseup 事件? 2022-01-01
- 检查 HTML5 拖放文件类型 2022-01-01
