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

本文介绍了动态类可以使用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