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

Question

现在我有以下内容：

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

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

我如何把它放在一个规则中？

Answer 1

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

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

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

.bordered {
   border: 1px solid red;
}

执行这两项中的一项将有助于防止过度具体，这将使维护变得更加容易。

Answer 2

只想添加比利的答案，你可以将其缩短为

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

甚至

.bordered {
    border: 1px solid red;
}

如果特异性不是问题。

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

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

Answer 3

只需将它们组合起来：

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