如何参数化CSS选择器？ [英] How to parameterize CSS selectors?

问题描述

可能是问题标题有点混乱，但是给一个具体的例子

May be the question title is bit confusing, but to give a specific example

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

我也希望此规则申请

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

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

If you see closely, the only difference between 2 selectors is .server and .client

？

感谢

推荐答案

使用< ：//www.w3.org/TR/css3-selectors/#groupingrel =nofollow>逗号分组选择器：

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

这篇关于如何参数化CSS选择器？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！