如何直接风格儿童？

Question

我正在修改一个古老的网站，该网站采用了表格和组合的方式。 CSS。在任何人说什么之前，切换到纯CSS不是一种选择。

我有这个结构：

table.grid
  tr
    td
      table
        tr
          td

在CSS中，.grid td有填充。

似乎.grid td样式正在应用于内部td（链中最远的那个）。有没有办法告诉.grid td在该特定表格中仅设置 td个标记？

（我远离CSS主人，所以如果我在这里咆哮错误的树，请告诉我）

Answer 1

table.grid > tr > td, table.grid > tbody > tr > td应该执行您想要的操作 - a > b指定要应用选择器，b必须是a的直接后代。您需要第二种形式，因为许多浏览器都会生成一个tbody。

这不起作用：.grid tr > td，因为内部表是.grid的后代。

Answer 2

>字符仅用于表示直接后代。

.grid > tr > td { /* style me! */ }

要解决@ bazmegakapa对潜在tbody的担忧，我会将其更改为：

.grid > tr > td, .grid > tbody > tr > td { /* no worries */ }

Answer 3

尝试：

table.grid > tr > td

如果你遇到使用thead，tbody，tfoot

的表格，

可能会有所帮助

Answer 4

您需要> selector。使用table.grid > tr > td仅适用于td正下方的table元素。

Answer 5

您可以更加具体，只选择td tr内的table.grid

.grid > tr > td

Answer 6

尝试这样做：

 table.grid > tr > td

但我不确定它是否有效。