CSS：不会按预期工作

Question

我想选择不具备.test和.test1类的元素。 以下不会起作用。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

很多时候，每当您发现自己处于需要使用:not的情况时，将会有一种更优雅的方式来重新编写样式，部署正面而不是< em>否定定位。

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

• 颜色所有内容 color:rgb(255,0,0);然后
• 正面定位.test.test1，重新着色color:rgb(0,0,0)

这样你就可以充分利用 cascade ，就像它应该工作的那样。

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>

Answer 2

根据MDN

预计

  

＆＃34;否定CSS伪类，不是（X），是一个功能符号，以简单选择器X作为参数。＆＃34;

不幸的是，你不是简单的选择器。

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

  

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

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

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

Answer 3

这应该有效：

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