CSS中的逗号，使用相同CSS的多个选择器答案

【问题标题】：Comma in CSS, multiple selectors using the same CSSCSS中的逗号，使用相同CSS的多个选择器
【发布时间】：2017-09-16 03:46:24
【问题描述】：

.Resource table.Tbl td
{ /* some css*/ }

.Resource table.Tbl td.num
{ /* some css 2*/ }

.Resource table.Tbl td.num span.icon
{ /* some css 3*/ }

.Resource table.Tbl2 td
{ /* some css*/ }

.Resource table.Tbl2 td.num
{ /* some css 2*/ }

.Resource table.Tbl2 td.num span.icon
{ /* some css 3*/ }

Tbl 和 Tbl2 的 CSS 应该相同。

.Resource table.Tbl, table.Tbl2 td { /* some css*/ }

不起作用。

如何在不复制整行的情况下实现这一点？

【问题讨论】：

标签： css css-selectors

【解决方案1】：

.Resource table.Tbl td, .Resource table.Tbl2 td { /* some css*/ }

您应该为这两个规则添加完整的祖先路径。不只是你看到差异的地方。

【讨论】：

这真的很重要。另一个建议可能会导致各种混乱，因为选择器 table.Tbl2 td 的第二部分不限于隐含的 .Resource 类。

【解决方案2】：

.Resource table.Tbl td, .Resource table.Tbl2 td { /* some css */ }

您必须在table.TblX 之前和之后复制这些内容，因为无法将, 运算符分组为比后代选择器具有更高的优先级。

【讨论】：

【解决方案3】：

你不能（不是在每个浏览器上，请继续阅读）。

不幸的是，每个选择器都是独立的。

它是CSS's annoying issues 之一。

有:any()，可以随心所欲，但浏览器支持有限。

您可以随心所欲地进行操作，并使用服务器端语言对其进行预处理，因此它会输出独立的选择器。

LESS 很受欢迎。

【讨论】：