我在Wordpress和Visual Composer一起工作，我有一个切换容器。基本上，我点击每个选项卡，下面的内容就会发生变化。我想通过CSS为每个选项卡分配一个不同的图像作为背景。但是，我已经实现了这一点，因为每个选项卡都有相同的类名（由visual composer赋予它），所以图像是相同的。我需要弄清楚如何给每个选项卡一个唯一的id，这样我就可以给每个选项卡一个自己的背景图像--但是由于我不能直接编辑html，我想我需要用JavaScript来做这件事。有人知道我是怎么做到的吗？下面是html代码：
<div class="vce-toggle-container-tab">
<a class="vce-toggle-container-tab-title">Test 1</a>
</div>
<div class="vce-toggle-container-tab">
<a class="vce-toggle-container-tab-title">Test 2</a>
</div>
和我的css添加背景图像：
a.vce-toggle-container-tab-title {
background-image: url("https://katherinemade.com/staging/wp-content/uploads/2021/03/0I1A5234-3.jpg") !important;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
width: 500px;
height: 500px;
}
我希望我解释清楚了。如果不明白请告诉我，我会再试一次。
您可以使用Nth child或Nth of-type选择器来实现，而不需要任何js，如下所示
null
a.vce-toggle-container-tab-title {
background-position: center;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
display: block;
width: 100px;
height: 100px;
}
.vce-toggle-container-tab:nth-of-type(1) a.vce-toggle-container-tab-title {
background-image: url("https://via.placeholder.com/150?text=one") !important;
}
.vce-toggle-container-tab:nth-of-type(2) a.vce-toggle-container-tab-title {
background-image: url("https://via.placeholder.com/150/0000FF/808080?text=two") !important;
}
.vce-toggle-container-tab:nth-of-type(3) a.vce-toggle-container-tab-title {
background-image: url("https://via.placeholder.com/150?text=THREE") !important;
}<div class="vce-toggle-container-tab">
<a class="vce-toggle-container-tab-title">Test 1</a>
</div>
<div class="vce-toggle-container-tab">
<a class="vce-toggle-container-tab-title">Test 2</a>
</div>
<div class="vce-toggle-container-tab">
<a class="vce-toggle-container-tab-title">Test 3</a>
</div>