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
tbody
element's start tag may be omitted if the first thing inside thetbody
element is atr
element, and if the element is not immediately preceded by atbody thead
, ortfoot
element 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 工作
基础教程推荐
- 用于 Twitter 小部件宽度的 HTML/CSS 2022-01-01
- 如何使用JIT在顺风css中使用布局变体? 2022-01-01
- Electron 将 Node.js 和 Chromium 上下文结合起来意味着 2022-01-01
- 直接将值设置为滑块 2022-01-01
- Vue 3 – <过渡>渲染不能动画的非元素根节点 2022-01-01
- 我可以在浏览器中与Babel一起使用ES模块,而不捆绑我的代码吗? 2022-01-01
- Chart.js 在线性图表上拖动点 2022-01-01
- html表格如何通过更改悬停边框来突出显示列? 2022-01-01
- 如何使用TypeScrip将固定承诺数组中的项设置为可选 2022-01-01
- 自定义 XMLHttpRequest.prototype.open 2022-01-01