动态类可以使用CSS样式吗? [英] Can a dynamic class be styled using CSS?
本文介绍了动态类可以使用CSS样式吗?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一个名为 .box-159
的类,其中每次刷新屏幕时数字都会改变。有没有办法定义这个字段(例如 background-color
)在CSS?
解决方案
是,只需使用 CSS 即可。
选项#1 -
- 使用 CSS
^ =class
/ strong>
^ =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 (saybackground-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屋!
查看全文