为什么我的 CSS 子选择器不能处理深度嵌套的元素？

CSS 子选择器：为什么我不能直接选择后代？

在 CSS 中，子选择器 (>) 表示直接选择后代元素之间的父子关系。但是，将子选择器应用于后代的后代可能会失败。考虑以下示例：

table > tr > td

此选择器将正确选择 td 元素，因为 td 元素是 tr 元素的直接子元素，而 tr 是 table 元素的直接子元素。但是，以下选择器会失败：

table > tr > td

了解缺少的 tbody 元素

HTML 文档会隐式创建一个 tbody 元素来包含 tr 元素，除非明确定义。因此，tr 永远不是 table 的直接子级，破坏了子选择器所需的直接父子关系。

解决方案：添加 tbody 选择器

到要解决此问题，您必须添加 tbody 选择器来弥合 table 和 table 之间的差距tr:

table > tbody > tr > td

对 XHTML 文档的影响

用作 application/xhtml xml 的 XHTML 文档不会创建隐式 tbody 元素。因此，上面的选择器在这种情况下仍然会失败。您需要显式添加 tbody 元素或使用不同的方法。

以上是为什么我的 CSS 子选择器不能处理深度嵌套的元素？的详细内容。更多信息请关注PHP中文网其他相关文章！