时间戳

首页 > 解决方案 > 如何使用 css 为一系列类定义样式（.progress-10 到 .progress-40）

css - 如何使用 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;}

有没有类似 .progress-10..30 {...} 的东西？

谢谢

标签： csssass

解决方案

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

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

推荐阅读