CSS：选择表格中没有嵌套表格的<td>

Question

CSS：选择表格中没有嵌套表格的<td>

css

7

如何选择表格中的 td 元素，而不包括嵌套表格中的 td 元素？
我考虑使用以下方法：table > tbody > tr > td以确保没有嵌套表格中的 td 元素，但是我想知道有没有更好的方法？

- Matthew

一个嵌套表格，就是一个表格内部包含另一个表格。 - Matthew

1

你能把你的问题说得更清楚一些吗？为什么不使用id或class来指定td？ - Carl0s1z

1

你输入的选择器有什么问题？ - Kong

什么不清楚。我特别问了如何选择TD元素，而不包括嵌套表格的TD。也许是我的英语太笨拙了？ - Matthew

2

今天的观众真难搞...为什么大家都要踩这个人的问题？他想要什么非常清楚。为什么这么多仇恨？ - Charlie74

显示剩余3条评论

3个回答

7

最简单的方法是给最外层表格添加一个id或class，然后在选择器中使用它：

table#id > tbody > tr > td

- Blake Mann

一个半相关的问题：如果在HTML中没有明确放置<tbody>标签，浏览器是否会自动创建一个？并且像你在答案中提到的CSS规则是否应该始终包括“> tbody >”？ - Der Wolf

2

@DerWolf 我不能代表每个浏览器，但至少在某些浏览器中似乎会发生这种情况。我认为你总是想要添加它，或者可能有两个选择器（一个带有，一个不带），只是为了确保其他浏览器不会让你陷入困境。但说实话，在实际使用中，如果您需要在嵌套表格中使用不同的样式，我甚至建议仅使用 td 选择器设置样式，然后使用 table table td 选择器手动重置它们，因为嵌套表格本身就在 td 中，并且会继承任何样式。 - Blake Mann

-1

说实话，我认为你想要实现的目标是不可能的。你可以尝试覆盖任何不需要的样式到嵌套表格单元格中。所以如果你将一个单元格应用了红色背景，并且该单元格有嵌套单元格，你需要用原始背景颜色来覆盖嵌套单元格。

- Kate McCubbins

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Kong · Accepted Answer

所以你有这个吗？

<table id="outer">
   <tbody>
      <tr>
         <td>
            <table id="anotherTable">
            ...
            </table>
         <td>
      <tr>
   </tbody>
</table>

你想只选择根表格中的td。

#outer>tbody>tr>td

就像您在问题中输入的那样（直接子元素选择器）。