Question

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

第一个表没有类样式；我默认使用什么。

第二个表具有：

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

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

我该如何解决这个问题？

Answer 1

通过在选择器中使用逗号，您是说“此样式适用于类别为table的任何t01，但也适用于任何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; }

如果您真正要寻找的是为th类的td的{{1}}和table后代定义样式，只需将{{ 1}}和t01 / table选择器，并带有空格：

尝试：

th

Answer 2

如果将样式更明确地应用于选择器会发生什么（请参见下文）

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

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

2 个答案: