CSS：不会按预期工作

我想选择既没有.test也没有.test1类的元素。以下将无法使用。CSS：不会按预期工作

ul li:not(.test.test1) 
 
{ 
 
    color:red; 
 
}

<ul> 
 
    <li class="test test1">one..</li> 
 
    <li class="two">two</li> 
 
    <li class="three">three</li> 
 
</ul>

2016-07-11 Doodles

这是预期为每MDN

“的否定CSS伪类，：未（X），是一种功能性表示法服用简单选择X作为参数。“

不幸的是你在没有简单选择。

一个简单的选择器的CSS Spec定义是：

...由一个特定的方面匹配的元件。类型选择器，通用选择器，属性选择器，类选择器，ID选择器或伪类是一个简单的选择器。

不幸的是，你是一个复合选择，因为它有类。

@Rounin在这里有最佳的解决方案。以上只是解释你为什么选择失败。

2016-07-11 11:30:52

谢谢，我明白了。看来，选择器是不同的执行jquery和css，cos以下工作为jquery http://jsfiddle.net/pkUy2/47/和不适用于css – Doodles

这应该工作：

ul li:not(.test),ul li:not(.test1) 
{ 
    color:red; 
}

2016-07-11 11:14:21 Kan412

但是如果一个li只有test或只有test1作为类会怎么样？ –

确实 - https://jsfiddle.net/u5xd2dw7/ –

@Ron Deijkers，@Paulie_D：谢谢你指出。我的回答是错误的。 'ul li：不（（。测试）：not（.test1）'是正确的答案，有人已经做到了，现在我无法在这篇文章中找到它。 – Kan412

很多时候，当你发现自己在你需要使用:not的情况下，会有再一个更优雅的方式 - 写入您的款式，部署正面而不是负面定位。

例如，而不是针对所有这不.test.test1，并给予它color:rgb(255,0,0)，为什么不：

这样，你趁级联的，在正是它应该工作的方式。

li { 
 
color: rgb(255,0,0); 
 
} 
 

 
li.test.test1 { 
 
color: rgb(0,0,0); 
 
}

<ul> 
 
    <li class="test test1">one..</li> 
 
    <li class="two">two</li> 
 
    <li class="three">three</li> 
 
</ul>

2016-07-11 11:18:46 Rounin

积极思考永远是最好的方式！ –

回答