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 。