如何使用css为一系列类(.Progress-10到.progress-40)定义样式

Question

编辑:我想要的是从10..30有一个背景，从31..40有另一个背景

我只需要知道如何在css中为一系列类定义样式，例如，如果我有以下HTML：

<div class=progress-10></div>
<div class=progress-20></div>
<div class=progress-30></div>
<div class=progress-31></div>
<div class=progress-40></div>

有没有一种方法可以在css中不逐个添加它们的情况下设置所有它们的样式，如下所示：

.progress-10,.progress-20,.progress-30 { background-color:red;}

有没有像.progress-10..30 {...}这样的东西？

谢谢

Answer 1

它并不完美，但您可以使用如下选择器：

[class^="progress-"] {}

这将选择所有以您选择的字符串开头的类。

​

div {
  border: 1px solid red;
  padding: 1em;
  margin: 1em;
}

[class^="progress-"] {
  background: pink;
}

<div class="progress-10"></div>
<div class="progress-20"></div>
<div class="progress-30"></div>

​