如何使用css为类范围(.progress-10到.progress-40)定义样式

提问者：小点点

编辑:我想要的是从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;}

是不是有点像。进步-10.。。30{。。。}？？

谢谢

共1个答案

匿名用户

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

[class^="progress-"] {}

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

null

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>