目標兒童多個類的一個CSS選擇器規則

Question

讓我們假設我有以下HTML結構：

<div> 
     <div class="class1"> 
      <p class="subclass">whatever</p> 
     </div> 
     <div class="class2"> 
      <p class="subclass">whatever</p> 
     </div> 
     <div class="class3"> 
      <p class="subclass">whatever</p> 
     </div> 
</div> 

是否有可能有一個CSS選擇器規則的目標下，祖先與類名subclass元素與類名class1或class2？

Answer 1

您可以使用屬性選擇與:not()選擇任何與.class*開始，排除.class3

[class^="class"]:not(.class3) .subclass { 
 
    color: red; 
 
}

<div> 
 
     <div class="class1"> 
 
      <p class="subclass">whatever</p> 
 
     </div> 
 
     <div class="class2"> 
 
      <p class="subclass">whatever</p> 
 
     </div> 
 
     <div class="class3"> 
 
      <p class="subclass">whatever</p> 
 
     </div> 
 
</div>

你總是可以選擇結合

.class1 .subclass, .class2 .subclass { 
 
    color: red; 
 
}

<div> 
 
     <div class="class1"> 
 
      <p class="subclass">whatever</p> 
 
     </div> 
 
     <div class="class2"> 
 
      <p class="subclass">whatever</p> 
 
     </div> 
 
     <div class="class3"> 
 
      <p class="subclass">whatever</p> 
 
     </div> 
 
</div>