css 在类属性后面有一个范围

Question

我有三个类:product1、product2、product3。我可以将 css 添加到所有这些类，如下所示:

.product1, .product2, .product3{
// add css here
}

但我正在寻找更清晰的代码来跟踪 1 到 3，然后是“产品”并向其中添加 css。我的期望可以是伪代码示例:

.product1to3{
// fun with css.
}

css有什么办法吗？

Answer 1

没有这样的 css 伪类来实现你想要实现的目标。

你可以尝试使用SASS来实现你想要的。

然后使用@for Directive

SASS

@for $i from 1 through 3 {
  .product#{$i} { width: 20px; }
}

CSS

.product1 {
  width: 20px;
}

.product2 {
  width: 20px;
}

.product3 {
  width: 20px;
}

<小时/>

您也可以尝试使用LESS

希望这有帮助