下面是一个简单的HTML表,我想 Select 唯一的<tbody>个元素.

    <table>
        <thead>
            <tr>
                <td>Team</td>
                <td>Points</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>A</td>
                <td>15</td>
            </tr>
            <tr>
                <td>B</td>
                <td>21</td>
            </tr>
        </tbody>
    </table>

因为只有一个<tbody>,我以为我可以用:nth-child(1)得到它,但失败了.

> document.querySelectorAll('table > tbody').length /* It worked */
< 1
> document.querySelectorAll('table > tbody:nth-child(1)').length /* It failed */
< 0
> document.querySelectorAll('table > tbody:nth-child(2)').length /* It worked */
< 1

为什么tbody:nth-child(1)不存在,但同时tbody:nth-child(2)存在?

推荐答案

为什么tbody:n-Child(1)不存在,而同时tbody:n-Child(2)存在?

tbody元素是table元素的second个子元素,因此:nth-child(1)不以它为目标,因为它不是第一个子元素,但:nth-child(2)确实以它为目标,因为它是第二个子元素.

另一种方法是使用tbody:nth-of-type(1),因为tbody元素是该类型元素中的第一个(也是唯一一个).

Html相关问答推荐

如何将FlexBox项目zoom 到其包含图像的大小

仅包含名为X的子元素的元素的XPath?

如何最大限度地减少Cookie同意代码对性能的影响?

按钮之间的HTML文本居中不正确

如何保持嵌套进度条的背景色?

尽管div高度为100%,div中的内容仍会溢出

带下划线的文本应该有延长的下划线,以使其图像悬停

如何使链接组件内的内容不重新路由Next.js13

如何防止弹性项目溢出容器?

Django 如何从文件系统下载文件?

如何围绕中心zoom svg 并使父级达到其子级大小的 100%

发送带有图像的Google文档作为HTML格式的邮件正文不再起作用

如何将 HTML DateTime 转换为 Golang Time 对象

如何根据行中的其中一列将行居中?

我应该如何使这个带有标签的隐藏复选框可访问

发光效果html动画

圆形边框显示在该部分后面.怎么修?

样式不适用于来自 tailwindcss 的网络

隐藏在标题后面的下拉菜单

Angular Material Hide Password 在输入时切换