Jquery 动态类div有两组css

我动态生成了div

<div class="test-1">1</div>
<div class="test-2">2</div>
<div class="test-3">3</div>
 ...
<div class="test-100">100</div>
<div class="test-101">101</div>

1
2.
3.
...
100
101

我想用红色显示test-1到test-50类

---

test-51和更高版本应为绿色。是否可以处理约束css，或者我可能需要在jquery css中使用没有

n个类

选择器。所以您不能使用它，但是如果所有元素都是有序的，并且都是同级元素，那么您可以使用

：nth child（n+x）

为元素1-50（红色）设置默认颜色，然后更改51及以上元素的颜色。使用

：第n个子项（n+51）

div{
颜色：红色；
}
分区：第n个子（n+4）{
颜色：绿色；
}

1
2.
3.
4.
5.
6

您可以将第二个类添加到类

test-1

到

test-50

，并将类

test-51

添加到上面，如：

.redColor{
    background-color: red;
}

.greenColor{
    background-color: green;
}

<div class="test-1 redColor">1</div>
<div class="test-2 redColor">2</div>
<div class="test-3 redColor">3</div>
 ...
<div class="test-100 greenColor">100</div>
<div class="test-101 greenColor">101</div>

.redColor{
背景色：红色；
}
.绿色{
背景颜色：绿色；
}
1.
2.
3.
...
100
101

---

或者您可以使用css预处理器，如

，而不是将类名指定为test-1、test-2……，您应该为两组div指定两个类名，即for=50，具体取决于循环的索引

e、 g.考虑到您的代码使用map动态创建div，仅包含10个div的代码可能如下所示：

`

[1,2,3,4,5,6,7,8,9,10]。地图（索引=>(
5？'green'：'red'}>{index}
))

---

`

如果您能够修改html生成，更好的解决方案是在前50个元素和其他50个元素中添加不同的类

1
2.
...
51
...
100

其他解决方案也有严重的缺点

而您可以手动写入

.test-1，
.测试-2，
...
.测试-50{
颜色：绿色；
}

这可能不是你想要的

这样的CSS可以通过预处理器或后处理器实现自动化，如果您使用的话。 例如，使用SASS

@for $i from 1 through 50 {
  .test-#{i} {
    color: green;
  }
}

但它会导致非常未优化的CSS

---

您还可以添加新类（“绿色”和“红色”）或直接使用jQuery应用样式，但它将在JS执行后应用。

如果IMHO选择不当的数值是一个挑战，但用于其他事情，如“test-group-a test-1”的类列表，然后是“test-group-b test-51”，则可以使用两个类从而简化了整个过程。这就是CSS在很多情况下的作用，“相同的东西得到相同的类”我添加了不止一个副本，或者“红色”，因为这是已经用于类名的模式。是的，你可以使用

红色

，

redColor

或

r-color

类名可以是任何东西。@MarkSchultheiss指的是使用

name

而不是

name

对HTML属性使用

kebab case

是一种命名约定

camelCase

应该用于命名变量和函数。好的，明白了。谢谢：）

@for $i from 1 through 50 {
  .test-#{i} {
    color: green;
  }
}