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

11 浏览
0 Comments

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

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

等等

\n我的静态简化的 CSS 如下：\n

.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;
}

\n我该如何使我的 .css 文件动态？

0

3 答案

0 Comments

动态生成的div元素无法通过常规的CSS选择器进行选择和样式设置。这是因为动态生成的div元素没有在页面加载时存在，而是在用户与页面进行交互时才被创建和添加到DOM中。

要解决这个问题，可以使用CSS选择器的属性选择器来选择动态生成的div元素。在上述代码中，我们使用了属性选择器[class^="thumbs-"]和[class*=" thumbs-"]来选择class属性以"thumbs-"开头或包含" thumbs-"的div元素。

[class^="thumbs-"]选择器表示选择class属性以"thumbs-"开头的div元素；

[class*=" thumbs-"]选择器表示选择class属性包含" thumbs-"的div元素。

通过这样的CSS选择器，我们可以选择到动态生成的div元素，并对其应用样式设置。在上述代码中，我们将选择到的div元素的display属性设置为inline-block，使其以行内块元素的方式显示，并设置其垂直对齐方式为顶部。

通过使用属性选择器来选择动态生成的div元素，我们可以在用户与页面进行交互时动态地应用样式，从而实现更灵活和动态的页面设计。

0
0 Comments

问题出现的原因：在动态生成的div中，如何使用CSS选择器来定位和样式化这些div。

解决方法：使用属性选择器来解决这个问题。属性选择器可以通过元素的属性值来选择元素。

具体实现方法如下：

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

其中，`[class^="thumbs"]`表示选择具有以"thumbs"开头的class属性值的元素。这样就能够选择到动态生成的div。

此外，还可以使用属性选择器来选择div中的子元素，如下所示：

[class^="thumbs"] img{
   /* 样式化子元素 */
}

其中，`[class^="thumbs"] img`表示选择具有以"thumbs"开头的class属性值的div中的img元素。

这样，我们就可以通过属性选择器来定位和样式化动态生成的div及其子元素了。

0
0 Comments

问题原因：动态生成的div元素无法直接通过CSS选择器进行定位和样式设置。

解决方法：可以使用属性选择器来选择具有特定属性值的元素。

具体代码如下：

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

上述代码可以选择所有class属性以"thumbs-"开头的div元素。

如果需要选择具有"class=thumbs-1"的div元素内部的img元素，可以使用以下代码：

div[class^='thumbs-'] img {
    width: 20px;
}

上述代码可以选择所有class属性以"thumbs-"开头的div元素内部的img元素，并设置其宽度为20px。

0