Question

我有以下测试代码：

<html>
<head>
    <style type="text/css">
        #test, .random-class { font-weight:bold; }
        #test, .random-class:not('.another-class') { color:red; }
    </style>
</head>
<body>
    <div id="test">hello world</div>
</body>
</html>

这会产生以下输出：

根据我的理解，你好世界应该大胆而红色，但它只是大胆的。我预计第二条规则会影响

id test 或
任何具有 .random-class 类的元素，而不是类 .another-class

我在这里缺少什么？为什么第二条规则不适用？

Answer 1

如果您更改了:not()选择器中的类，则不需要该类的引号：

#test, .random-class:not(.another-class) 
{ 
    color:red; 
}

它会像你期望的那样工作

在这里查看demo

查看:not()选择器

上的文档here

@KWeiss在评论中提到：

具体而言，引号使选择器无效，因此未应用规则

希望这有帮助！

Answer 2

你不需要使用'in：not

#test, .random-class { font-weight:bold; }
#test, .random-class:not(.another-class) { color:red; }

Answer 3

第二条规则未应用，因为您的sytax中存在错误，这会打破整个规则，而不仅仅是破坏的选择器。

:not(.abother-class)是正确的语法（没有引号。

如果您将规则分成两部分，那么您将获得所需的效果，就像修复错误一样。这两种解决方案中的任何一种都应该有效：

#test {color: red}
.random-class:not('.another-class') {color: red} /*This is still broken, but doesn't effect the above rule now*/

或

#test, .random-class:not(.another-class) {color: red} /* fixed*/

CSS：not（）选择器影响其他元素，我缺少什么？

3 个答案: