为什么 `table > tr > td` 没有按照 CSS 中的预期选择表格单元格？

tr > td` 按照 CSS 中的预期选择表格单元格？ " />

了解表结构子选择器的限制

在 HTML 文档结构中，table > tr > td 元素之间的关系通常被假定为父子关系然而，当使用 CSS 选择器时，理解为什么子选择器 (>) 的行为异常是至关重要的。

> td 选择器可能看起来应该选择 tr 元素的直接后代元素，而 tr 元素又是 table 元素的直接后代元素。 ，浏览器隐式引入一个额外的 tbody 元素。

这意味着实际的层次结构看起来像this:

table > tbody > tr > td

选择器 table > tr > td 将不起作用，因为 tr 元素不是 table 元素的直接子元素，而是 tbody 元素的子元素。 🎜>

要在这种情况下正确选择 td 元素，您应该使用以下内容选择器：

table > tbody > tr > td

演示：

在提供的Fiddle [后代选择器](http://jsfiddle.net/brLee/1/) ，tr> td 选择器按预期工作，选择 tr 元素中的所有 td 元素。这是因为后代选择器 (>) 选择指定元素的所有后代，包括那些间接相关的元素。

相比之下，提供的 Fiddle [子选择器](http://jsfiddle.net/ brLee/)，它使用 table > tr> td，不会选择任何 td 元素，因为 tr 元素不是 table 元素的直接子元素。

浏览器行为：

在 HTML 文档中，隐式添加tbody 元素的默认行为是浏览器的默认行为，以确保正确呈现表格。然而，在作为 application/xhtml xml 的 XHTML 文档中，这种隐式添加不会发生。因此，使用表 > 的子选择器 (>) tr> XHTML 文档中的 td 将正常工作。

以上是为什么 `table > tr > td` 没有按照 CSS 中的预期选择表格单元格？的详细内容。更多信息请关注PHP中文网其他相关文章！