我有以下测试代码:
<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>
这会产生以下输出:
在我的理解中，hello world应该是粗体和红色，但它只是粗体。 我预计第二条规则会影响
- id 为test 的元素或
- 类为 .random-class 而不是类 .another-class 的任何元素>
我在这里错过了什么？为什么不应用第二条规则？
最佳答案
你不需要在你的 :not() 选择器中类周围的引号，如果你改变它，它变成:
#test, .random-class:not(.another-class)
{
color:red;
}
它会像你期望的那样工作
在这里查看 demo
看看here对于 :not() 选择器
@KWeiss 在评论中提到:
Specifically the quotes are making the selector invalid so the rule is not applied
希望这对您有所帮助!
关于CSS :not() selector affects other elements, 我错过了什么？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40339977/