How to parameterize CSS selectors? [duplicate]

2019-09-19 02:13发布

问题:

This question already has an answer here:

  • CSS3 combining selectors with OR instead of AND 3 answers

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

I also want this rule to apply for

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

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

Can I combine them in 1 rule somehow?

Thanks

回答1:

Use a comma to group selectors:

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

If you were using a CSS preprocessor, like LESS, you could use:

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