Css :n第n个子定义&;当它遇到tr和标题时
对于下面的代码,我发现我对Css :n第n个子定义&;当它遇到tr和标题时,css,css-selectors,Css,Css Selectors,对于下面的代码,我发现我对:n个孩子的定义感到困惑 :第n个子元素(n)选择器匹配第n个子元素的每个元素,无论其父元素的类型如何 tr:n子级(2n){ 背景颜色:灰色; } 桌子{ 左边距:20px; 右边距:20px; 边界间距:0px; 边框:薄而实的黑色; 标题侧:底部; 边界塌陷:塌陷; } 运输署, th{ 边框:细点灰色; 填充物:5px; } 标题{ 字体:斜体; 填充顶部:8px; } 内容 桌头 111111 222222 333333 444444 555555 666
:n个孩子的定义感到困惑
:第n个子元素(n)
选择器匹配第n个子元素的每个元素,无论其父元素的类型如何
tr:n子级(2n){
背景颜色:灰色;
}
桌子{
左边距:20px;
右边距:20px;
边界间距:0px;
边框:薄而实的黑色;
标题侧:底部;
边界塌陷:塌陷;
}
运输署,
th{
边框:细点灰色;
填充物:5px;
}
标题{
字体:斜体;
填充顶部:8px;
}
内容
桌头
111111
222222
333333
444444
555555
666666
这里的问题是您的HTML无效tr
元素必须包装在thead
、tbody
或tfoot
元素中,大多数浏览器将通过将它们粘贴在tbody
中来自动修复此问题
在这些浏览器上,您的HTML最终将显示如下:
<table>
<caption>...</caption>
<tbody>
<tr>...</tr>
...
</tbody>
</table>
...
...
...
因此,删除
元素不会影响tr
元素的定位
如果检查
元素,您将看到以下内容:
真的!我在Chrome的开发者工具中查看了我的HTML,看到了tbody标签,但没有注意到它。。。太多了!也许我应该在询问之前先验证我的代码