动态类可以使用CSS样式吗? [英] Can a dynamic class be styled using CSS?

查看:128
本文介绍了动态类可以使用CSS样式吗?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

解决方案

是,只需使用 CSS 即可。



选项#1 -


  • 使用 CSS ^ =class / strong>



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

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



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




  • 使用另一个 CSS类选择器 * =class(等效于 CSS属性选择器)选择所有其类包含至少一个子串 strong> box - 。



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

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



对于未来的读者,您可以在StackOverflow文档中找到关于此主题的更多信息此处


I have a class called .box-159 where the number changes every time the screen is refreshed. Is there a way to define this field (say background-color) in the CSS?

解决方案

Yes it is possible just by using CSS only.

Option #1 - Match by prefix value

  • Use CSS Class selector ^="class" which select all elements whose class is prefixed by "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>

Option #2 - Match by contains at least one value

  • Use another CSS class selector *="class" (equivalent to CSS attribute selector) which select all elements whose class contains at least one substring "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>

For future readers, you can find more information about this topic on StackOverflow Documentation here

这篇关于动态类可以使用CSS样式吗?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆