css – 具有两个类之一但不是两个类的元素的选择器

如何选择具有两个类别之一的元素,而不是两个类别？

我试过：not(.class1,.class2)和：not(.class1)：not(.class2)但是他们似乎选择了缺少任何一个类的元素.我需要选择没有这两个类的元素.

我也尝试过：not([class =’class1 class2′])as this accepted answer states,但它似乎没有选择任何东西.

这是我想要的样本 –

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

<ul class="tabs">
    <li class="first">1st</li>
    <li class="active last">2nd</li> <!-- Should be red -->
</ul>

<ul class="tabs">
    <li class="active first last">1st</li> <!-- Should NOT be red -->
</ul>

< li>还有其他我不负责的课程.我想知道是否有一种方法可以忽略我试过的最后一个选择器的其他类.

你想要：not(.first),：not(.last)是Selectors level 3支持的版本：not(.first.last)(来自Selectors 4,尚未被所有浏览器支持,以及jQuery) ：

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

<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>

正如Rounin指出的那样,你应该能够使用：first-of-type和：last-of-type,或者：first-child和：last-child,而不是使用“first”来扩展标记, “last”类(如果这些类表示与伪类相同的东西).

事实上,如果你切换到那些伪类,你可以通过压缩来简化你的CSS到一个选择器：not(：first-of-type),：not(：last-of-type)to：not(：仅-的型)：

ul.tabs > li.active:not(:only-of-type) {
    background-color: #F00;
}

<ul class="tabs">
    <li>1st</li>
    <li class="active">2nd</li>
</ul>

<ul class="tabs">
    <li class="active">1st</li>
</ul>