目标儿童多个类的一个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>