CSS / Javascript / JQuery中的类和选择器匹配

Question

我想将JQuery CSS调用（修改CSS，以便可以使用变量）与某些Javascript div /类进行匹配。 我不能使用“ id”，因为循环中有许多这样的实例。 编辑：它仍然不是很有效，我怀疑我需要在这里多一点细节。

CSS的相关部分（还有其他转换行，此处未显示）：

.thermometer .circle {
    position: absolute;
    ...

.pie {
    position: absolute;
    ...
}

.hold {
    position: absolute;
    ...
    clip: rect(0px, 26px, 26px, 13px);
}

.pieSlice1 .pie {
    background-color: white;
    -webkit-transform:rotate(60deg);
    transform:rotate(60deg);
}

在JST EJS文件中：

 <div class="thermometer">
   <div class="circle <%= this.presenter.newColor(nutrient) %>">
     <div class="pieSlice1 hold">
       <div class="pie"></div>
         <% $(".pieSlice1.hold .pie").css({'-webkit-transform': 'rot
ate(22deg)'}); %>

我删除了“ pieSlice1”和“ hold”之间的空格，但是我是否需要其他任何类才能进行匹配？

Answer 1

它应该是：

.pieSlice1.hold .pie

.pieSlice1和.hold之间没有任何空格

Answer 2

如果您想要一个相交，只需将选择器一起写在一起，且中间不要留空格。

$(".pieSlice1.hold .pie").css({'-webkit-transform': 'rot
ate(22deg)'});

当我们包含空间时，它会寻找后代...

另一个选择是：

$(".pieSlice1").filter(".hold .pie").css({'-webkit-transform': 'rot
ate(22deg)'});

Answer 3

由于.pieSlice1和.hold都是同一元素上的类，因此需要将它们链接起来：

.pieSlice1.hold .pie

注意如何有之间没有空格.pieSlice1和.hold -这意味着它会匹配类元素.pie这是既有元素的后代.pieSlice1和.hold类。

鉴于您现在所拥有的...

.pieSlice1 .hold .pie

这将匹配用类的元素.pie其与类元素的后代.hold ，它本身是用类的元素的后代.pieSlice1 。