如何选择仅含两个类之一而非同时包含两者的CSS元素？

要实现你需要的「选中拥有.active类，且不同时拥有.first和.last类的元素（不管是否有其他额外类）」，可以用这个CSS选择器：

ul.tabs > li.active:not(.first.last) {
  background-color: #F00;
}

为什么之前的方法不生效？ #

咱们逐一分析你试过的方案问题：

• :not(.class1, .class2) 或 :not(.class1):not(.class2)：
  这两种写法的逻辑是「排除拥有.class1 或 .class2的元素」，最终选中的是既没有.first也没有.last的元素，完全不符合你要保留「拥有其中一个类」的需求。

• :not([class='first last'])：
  这个选择器是精确匹配class属性的完整值，只有当元素的class属性恰好是"first last"时才会被排除。但你的目标排除元素是<li class="active first last">，它的class属性值是"active first last"，和选择器的精确值不匹配，所以根本无法排除这个元素。

验证你的示例场景 #

把正确的选择器应用到你的HTML上：

<ul class="tabs"> 
  <li class="first">1st</li> 
  <li class="active last">2nd</li> <!-- 会被选中，背景变红 --> 
</ul> 
<ul class="tabs"> 
  <li class="active first last">1st</li> <!-- 被排除，背景不变 --> 
</ul>

即使<li>有其他额外类（比如foo、bar），只要它不同时拥有.first和.last，依然会被正确选中，完美满足你「忽略其他类」的需求。

内容的提问来源于stack exchange，提问作者Arthur Rey