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中文网其他相关文章!