动态类可以使用CSS进行样式设置吗？

Question

我有一个类名为 .box-159 的类，在屏幕刷新时该数字会更改。 有没有一种方法可以在CSS中定义此字段（比如说 background-color）？

- user5941451

---

CSS允许使用通配符吗？我认为不行。你可以用除了类名以外的其他方式来引用元素。 - jpaugh

你是在问是否根据类名末尾的数字来为元素设置不同的样式？ - Cruiser

Answer 1

可以仅使用CSS实现。

选项＃1-通过前缀值匹配

• 使用CSS类选择器^="class"，它选择所有类以"box-"为前缀的元素。

[class^="box-"] {
  background: red;
  height: 100px;
  width: 100px;
  margin: 10px 0;
  display:block
}

<div class="box-159"></div>
<span class="box-147"></span>
<article class="box-76878"></article>

选项#2-至少包含一个值的匹配

• 使用另一个CSS类选择器 *="class" (相当于CSS属性选择器)，它选择所有其类包含至少一个子字符串"box-"的元素。

[class*="box-"] {
  background: red;
  height: 100px;
  width: 100px;
  margin: 10px 0;
  display:block
}

<div class="box-159"></div>
<span class="box-147"></span>
<article class="box-76878"></article>

- dippas

Answer 2

您可以添加一个额外的类，如下所示，然后这两个元素都将具有该类的CSS属性：

.box-class {
    background-color: red;
    width: 100px;
    height: 100px;
    margin-bottom: 20px;
}

<div class="box-class box-4"></div>
<div class="box-class box-159"></div>

- Clemens Himmer

---

不需要另一个类，只需使用CSS选择器即可完成。 - Adam Konieska

我刚刚注意到，这是一种非高效但至少可行的工作解决方案 :) - Clemens Himmer

我更喜欢这个解决方案。属性选择器，特别是使用部分字符串匹配，总是比像这样的简单类选择器慢。 - Heretic Monkey