Question

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

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

但我正在寻找更清晰的代码来跟踪1到3，然后是产品＆＃39;并将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

希望这有帮助

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

如果你有一个未知/高数量的＆＃34; .product（x）＆＃34;，并且由于某种原因不想使用额外的课程来定位它们，你可以逃脱一个属性选择器，匹配所有具有包含＆＃34; product＆＃34;的类的元素。

[class*="product"]

＆＃13;

div{
  border:2px solid tan;
  height:40px;
}

[class*="product"]{
  background:steelblue;
}

＆＃13;

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

＆＃13;

它只占用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;
}

css具有类属性后的范围

5 个答案: