css - 表 th 和 tr 中的两个元素的样式相同。如何避免冗余？

Question

现在我有以下内容：

table th.bordered {
  border: 1px solid red;
}

table td.borderd {
  border: 1px solid red;
}

我怎样才能把它放在一个规则中？

Answer 1

Billy 的方法在技术上是正确的，但还有更好的方法：

table .bordered {
  border: 1px solid red;
}

甚至（如果你想在桌子以外的东西上使用它）：

.bordered {
   border: 1px solid red;
}

做这两个之一将有助于防止过于具体，这将使它更容易维护。

Answer 2

只是想添加到比利的答案中，您可以将其缩短为

table .bordered {
    border: 1px solid red;
}

甚至

.bordered {
    border: 1px solid red;
}

如果特异性不是问题。

性能会稍好一些，因为浏览器在找到具有“bordered”类的元素后不必检查父元素。但在大多数情况下，这可以忽略不计。

您可能还希望您的类名更具语义，而不仅仅是“有界”。诸如“highlightColumn”或“errorCell”之类的东西。例如，以防万一您决定使用橙色背景而不是红色边框，或者想要将不同的边框用于不同的目的。

Answer 3

像这样组合它们：

table th.bordered, table td.bordered {
  border: 1px solid red;
}