html - 如何专门为一个表类设置 th 和 td 的样式？

Question

我有一个非常烦人和莫名其妙的问题。我的网站有两种不同类别的表格。一个没有边界，另一个有。但是无论我做什么，我都无法将 th 和 td 样式与另一个表分开。

第一个表没有类样式；我默认为任何值。

第二个表有:

table.t01, th, td {
   border: 4px solid black;
   border-collapse: collapse;
}

但是，这会影响第一个表的 th 和 td 的样式。卧槽。

我该如何解决这个问题？

Answer 1

通过在选择器中使用逗号，您是在说“此样式适用于类 t01 的任何 table，但也适用于任何 th和任何 td。”

这对于合并具有相同样式的许多元素的样式很有用。例如，以下是等价的:

// The verbose way
th { color: red; }
td { color: red; }
p.red { color: red; }
div#firstred { color: red; } 

// The concise way
th, td, p.red, div#firstred { color: red; } 

如果您真正想要的是为类为 t01< 的 table 的 th 和 td 后代定义样式，只需用空格分隔 table 和 th/td 选择器的条款:

尝试:

table.t01 th, table.t01 td {
   border: 4px solid black;
   border-collapse: collapse;
}