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

上海社会科学院

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

CSS

.product1 {
  width: 20px;
}

.product2 {
  width: 20px;
}

.product3 {
  width: 20px;
}

---

您也可以尝试使用LESS

希望这可以帮助

Answer 2

纯css实现JSfiddle

所以基本上你需要一个“属性从选择器开始”，即选择以“product”开头的所有类，然后你可以使用第n个子属性来选择范围

div[class^="product"]:nth-child(n+4):nth-child(-n+5) {
   background: red;
}

关于complex css和nth:child的非常好的文章

Answer 3

/* This selects all the elements which have the class name starting with 
    "product" 
*/
[class ^= "product"] {
  //CSS
}

Answer 4

如果您有一个未知/高数量的“.product（x）”，并且由于某种原因不想使用额外的类来定位它们，您可以使用属性选择器来匹配所有具有类的元素包含“产品”。

[class*="product"]

div{
  border:2px solid tan;
  height:40px;
}

[class*="product"]{
  background:steelblue;
}

<div class="product1"> product 1 </div>
<div class="product2"> product 2 </div>
<div class="not"> not a product</div>
<div class="product3"> product 3 </div>
<div class="product4"> product 4 </div>

它只占用1行编译的CSS，因此占用空间极小，但要小心如何应用它。

Answer 5

不是OP的答案，但对于其他可能在这里找到方法的人来说，记住你可以为每个元素使用多个类。

HTML

<div class="product product1"></div>
<div class="product product2"></div>
<div class="product product3"></div>

CSS

/* shared styling */
.product {
    display: flex;
    background-color: gray;
    border: 1px solid red;
}
/* individual styling */
.product1 { 
    color: black;
}
.product2 {
    color: white;
}
.product3 {
    color: blue;
}