如何参数化 CSS 选择器？ [复制]答案

【问题标题】：How to parameterize CSS selectors? [duplicate]如何参数化 CSS 选择器？ [复制]
【发布时间】：2015-06-12 17:15:36
【问题描述】：

可能题名有点混乱，举个具体的例子

body.page-status .panel.panel-info .server .dot {
  font-size: 10px;
}

我也想申请这条规则

body.page-status .panel.panel-info .client .dot {
  font-size:10px;
}

如果仔细观察，两个选择器之间的唯一区别是 .server 和 .client

我可以以某种方式将它们组合成一条规则吗？

谢谢

【问题讨论】：

body.page-status .panel.panel-info .server .dot, body.page-status .panel.panel-info .client .dot {

【解决方案1】：

使用comma to group selectors：

body.page-status .panel.panel-info .server .dot,
body.page-status .panel.panel-info .client .dot {
  font-size: 10px;
}

如果您使用的是 CSS 预处理器，例如 LESS，您可以使用：

body.page-status .panel.panel-info {
  .server, .client {
    .dot {
      font-size: 10px;
    }
  }
}

【讨论】：