动态生成的 div 的 CSS 选择器 [重复]答案

【问题标题】：CSS selector for dynamically generated div's [duplicate]动态生成的 div 的 CSS 选择器 [重复]
【发布时间】：2015-04-14 07:05:15
【问题描述】：

如何按类选择每个动态生成的 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 文件动态化？？

【问题讨论】：

如果 CSS 内容在每种情况下都相同，为什么不使用 .thumbs 作为类名而不是 thumbs-1 等？

标签： css css-selectors

【解决方案1】：

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

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

表示，选择名称以thumbs-开头的类

【讨论】：

如何将 thumbs- 与 img 结合起来，以便我可以定位 .thumbs-1 img { div[class^='thumbs-'] img ??
div[class^='thumbs-'] img{ width:20px; } 这样您就可以在类从thumbs-开始的div中选择img元素

【解决方案2】：

使用attribute selector:

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

[attr^=value]

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

【讨论】：

看起来很有希望如何定位 .thumbs-1 img {
[class^="thumbs"] img{

【解决方案3】：

你想要下面的 CSS 选择器

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

【讨论】：

tx 人正在使用这个