用于动态生成div的CSS选择器

Question

如何按类选择每个动态生成的div？

<div class="thumbs-1 col-sm-4 col-md-4"></div>
<div class="thumbs-2 col-sm-4 col-md-4"></div>
<div class="thumbs-3 col-sm-4 col-md-4"></div>
<div class="thumbs-4 col-sm-4 col-md-4"></div>
etc

我的静态简化css看起来像

.thumbs-1 {
    display: inline-block;
    vertical-align: top;
}
.thumbs-2 {
    display: inline-block;
    vertical-align: top;
}
.thumbs-3 {
    display: inline-block;
    vertical-align: top;

}
.thumbs-4 {
    display: inline-block;
    vertical-align: top;
}

如何使我的.css文件动态化？

Answer 1

是的，您可以使用正则表达式

div[class^='thumbs-'] {
    color: black;  
}

表示选择名称从thumbs-

开始的类

Answer 2

使用attribute selector：

[class^="thumbs"]{
   display: inline-block;
   vertical-align: top;
}

[attr^=value]

  

表示属性名称为attr且其值以“value”为前缀的元素。

Answer 3

您需要以下CSS选择器

div[class^="thumbs-"], div[class*=" thumbs-"] {
    display: inline-block;
    vertical-align: top;
}