如何参数化 CSS 选择器？

Question

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

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

我也想申请这条规则

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

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

我能否以某种方式将它们合并为 1 个规则？

谢谢

Answer 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;
    }
  }
}