html - 调整特定表格的所有单元格的 CSS 而不给每个单元格一个唯一的 id？

Question

有没有办法根据表格的 id 而不是特定的子 id 来修改一个表格单元格的 CSS 属性？

我想以一种方式更改一个表格的外观（例如，给每个单元格一个彩色边框），并以另一种方式更改另一个表格，但我想避免为每个单元格指定一个 id。

需要明确的是，我不需要单独访问表格中的每个单元格 - 我只想设置各种表格的“子”单元格的所有属性。

Answer 1

如果您可以识别特定的表，那么没有问题。只需使用后代选择器：

#tableid1 td { border: 2px solid green; }

这就是说，作为 ID 为 tableid1 的表格的后代的所有表格单元格都有绿色边框。要包括<th>单元格：

#tableid1 td, #tableid1 th { border: 2px solid green; }

注意：如果您有嵌套表，则上述可能会出现问题，例如，您希望外部表具有边框而不是内部表。通常不建议使用嵌套表，但有时没有其他选项。有多种方法可以处理此类问题。

首先，您可以改用子选择器 ( >)：

#id1 > tbody > td { ... }

该<tbody>元素在这里是隐含的。

问题是 IE6 不支持子选择器。

另一种处理方法是取消效果：

#id1 td { border: 2px solid green; }
#id1 td td { border: 0 none; }

这并不总是实用的，但它确实适用于 IE6。