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

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

【问题讨论】:

  • CSS 是否允许使用通配符?我不这么认为。你可以通过类以外的东西来引用元素
  • 您是否要求根据类末尾的数字为元素设置不同的样式?

标签: html css css-selectors


【解决方案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>

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

  • 使用另一个 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>

    【讨论】:

    • 不需要另一个类,这可以单独使用 CSS 选择器来完成。
    • 我刚刚注意到,它至少是一个低效的、有效的解决方案 :)
    • 我更喜欢这个解决方案。属性选择器,尤其是使用部分字符串匹配,总是比像这样的简单类选择器慢。
    猜你喜欢
    • 2019-12-30
    • 2014-04-15
    • 2021-08-23
    • 2019-10-11
    • 2010-12-12
    • 1970-01-01
    • 1970-01-01
    • 2019-04-26
    相关资源
    最近更新 更多