可以使用 CSS 设置动态类的样式吗？ [复制]答案

【问题标题】：Can a dynamic class be styled using CSS? [duplicate]可以使用 CSS 设置动态类的样式吗？ [复制]
【发布时间】：2016-06-08 22:21:57
【问题描述】：

我有一个名为.box-159 的类，每次刷新屏幕时，数字都会改变。有没有办法在 CSS 中定义这个字段（比如background-color）？

【问题讨论】：

【解决方案1】：

是的，仅使用 CSS 即可。

选项 #1 - 按前缀值匹配

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

使用另一个 CSS 类选择器 *="class"（相当于CSS attribute selector）选择其类中至少包含一个子字符串“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 属性：

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

【讨论】：