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

Question

我有一个类.box-159,在每次刷新屏幕时,数字都会改变.有没有办法background-color在CSS中定义这个字段(比如说)？

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>

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>