将 3 个 CSS 选择器合二为一答案

【问题标题】：Combine 3 CSS selectors into one将 3 个 CSS 选择器合二为一
【发布时间】：2015-04-15 00:36:09
【问题描述】：

有 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 */
}

【问题讨论】：

使用纯 CSS 可以获得的最佳效果是 #table1 a,#table2 a,#table3 a，尽管这并不是 100% 等价于您所拥有的。
如果您只想在源代码中编写短选择器并且不介意生产代码中的长选择器，请尝试 SASS。你可以写嵌套选择器#table, #table, #table { tbody td a { /* style */ } }
为了扩展@rzr 的建议，几乎any CSS 预处理器都可以轻松处理这个问题。如果这是您经常需要的功能，我会研究预处理器。但是，考虑到您不想使用类，我会假设预处理器的开销比您要寻找的要多：P
昨天有人问过这个问题：stackoverflow.com/questions/29502927/…，但鉴于这三个 ID 似乎有一些共同点，因此那里的欺骗目标在这种情况下并不是特别有用。
如果可以的话，我会推荐使用 class 而不是 ID。即<table class="table table1">、<table class="table table2"> 和这样的css .table {} 用于共享规则，.table1 {}、.table2 {} 用于单个规则。虽然这并不能真正回答你的问题。

【解决方案1】：

您可以使用属性选择器：

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

【讨论】：

【解决方案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;   
}

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

【讨论】：

仅供参考，:any() 指定为 :matches()。实际上可能不会有无前缀的:any()。
有趣的是，它当前的实现方式只是扩展为完整的逗号分隔形式，即问题中给出的#table1 tbody td a, #table2 tbody td a, #table3 tbody td a。从本质上讲，这是一种语法糖，开销可以忽略不计。
@BoltClock Cool，将使用此信息更新答案

【解决方案3】：

如果必须这样做，您可以使用attribute selector，如下所示：

[id^="table"] td a {

}

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

例如，如果你想添加另一个 ID 为 table-view 的元素，现在你的 CSS 规则将被导入，并且不使用更具体的选择器或可怕的 !important 语句，你会被卡住有了它！

【讨论】：

【解决方案4】：

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

为什么不使用类呢？如果您将相同的 CSS 应用到多个表格，这会更容易，而且从可重用性的角度来看，当您决定需要在六个月内添加表格 4 时会更容易。

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

【讨论】：