搜索
首页web前端css教程为什么 `table > tr > td` 没有按照 CSS 中的预期选择表格单元格?

Why Doesn't `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中文网其他相关文章!

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
Draggin'和droppin'在反应中Draggin'和droppin'在反应中Apr 17, 2025 am 11:52 AM

React生态系统为我们提供了许多库,所有库都集中在拖放的相互作用上。我们有反应,反应,可爱dnd,

快速软件快速软件Apr 17, 2025 am 11:49 AM

最近有一些关于快速软件的完美互连的事情。

带有背景折叠的嵌套梯度带有背景折叠的嵌套梯度Apr 17, 2025 am 11:47 AM

我可以说我经常使用背景折叠。 IT Wager IT几乎从未在日常CSS工作中使用。但是在斯特凡·朱迪斯(Stefan Judis)的帖子中,我想起了它,

使用React Hooks使用requestAnimationFrame使用React Hooks使用requestAnimationFrameApr 17, 2025 am 11:46 AM

使用RequestAnimationFrame进行动画化应该很容易,但是如果您还没有彻底阅读React的文档,那么您可能会遇到一些事情

需要滚动到页面顶部吗?需要滚动到页面顶部吗?Apr 17, 2025 am 11:45 AM

向用户提供此链接的最简单方法是针对元素上的ID的链接。如此...

最好的(GraphQl)API是您编写的API最好的(GraphQl)API是您编写的APIApr 17, 2025 am 11:36 AM

听着,我不是GraphQL专家,但我确实喜欢与之合作。作为前端开发人员,它向我曝光数据的方式非常酷。它就像一个菜单

在保留边框半径的同时,扩展盒子的各种方法在保留边框半径的同时,扩展盒子的各种方法Apr 17, 2025 am 11:19 AM

我最近注意到Codepen的一个有趣的更改:在悬停在主页上的笔时,有一个矩形,圆角在后面扩展。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
1 个月前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
1 个月前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您听不到任何人,如何修复音频
1 个月前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.聊天命令以及如何使用它们
1 个月前By尊渡假赌尊渡假赌尊渡假赌

热工具

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

功能强大的PHP集成开发环境

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

EditPlus 中文破解版

EditPlus 中文破解版

体积小,语法高亮,不支持代码提示功能

安全考试浏览器

安全考试浏览器

Safe Exam Browser是一个安全的浏览器环境,用于安全地进行在线考试。该软件将任何计算机变成一个安全的工作站。它控制对任何实用工具的访问,并防止学生使用未经授权的资源。

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具