将3个CSS选择器合二为一

Question

共有3个表：#table1，#table2和#table3。

有没有办法在不使用css类的情况下为所有3个表指定样式？

例如，我们可以合并以下选择器：

#table1 tbody td a, #table2 tbody td a, #table3 tbody td a {
    /* rules here */
}

成像：

(#table1, #table2, #table3) tbody td a {
    /* rules here */
}

Answer 1

您可以使用属性选择器：

[id^="table"] tbody td a {
   /* your code */
}

Answer 2

在CSS 中执行此操作的方法将是 the :any selector：

:any(#table1, #table2, #table3) tbody td a {
    color: red;   
}

目前这是实验性的，仅在Firefox，Chrome / Opera和Safari中受支持。由于它只有前缀版本，因此您可能无法为每个ID列出规则，因为您需要为每个前缀设置规则，这样可能无法保存您的输入：

:-moz-any(#table1, #table2, #table3) tbody td a {
    color: red;   
}
:-webkit-any(#table1, #table2, #table3) tbody td a {
    color: red;   
}

Demo

正如BoltClock在评论中指出的那样，目前CSSWG对此功能的提议是:matches()伪类，here's a nice article which explains the selector以及如何使用Sass获得相同的结果。

Answer 3

如果执行此操作至关重要，您可以使用attribute selector，如下所示：

[id^="table"] td a {

}

但是，通常最好使用类定义将相同的样式应用于多个元素。它不仅性能更高，而且可以更好地扩展以供将来使用，并且意味着您的元素ID受到保护。

例如，如果您想要添加ID为table-view的其他元素，现在您的CSS规则将被导入，而不使用更具体的选择器或可怕的!important语句，该怎么办？你坚持下去了！

Answer 4

您可以使用逗号分隔选择器，但只能使用完整选择器：#table1 tbody td a, #table2 tbody td a ...而不是(#table1, #table2, #table3) tbody td a。

为什么不使用课程呢？如果您将相同的CSS应用于多个表格，那么它会更容易，从重新使用的角度来看，当您决定在六个月内添加表格4时，这会更容易。“ / p>

始终为您可能最终得到的东西而不是您目前所拥有的东西进行设计。