我想编写一个CSS选择器规则,选择所有没有特定类的元素。例如,给定以下HTML:
<html class="printable">
<body class="printable">
<h1 class="printable">Example</h1>
<nav>
<!-- Some menu links... -->
</nav>
<a href="javascript:void(0)" onclick="javascript:self.print()">Print me!</a>
<p class="printable">
This page is super interresting and you should print it!
</p>
</body>
</html>
我想编写一个选择器,选择所有没有“可打印”类的元素,在本例中,这些元素是nav和a元素。
这可能吗?
注意:在我想要使用的实际HTML中,没有“可打印”类的元素将比没有“可”类的多得多(我意识到在上面的示例中是相反的)。
正如其他人所说,您只需输入:not(.class)。对于CSS选择器,我建议访问此链接,这在我的整个旅程中非常有用:https://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048
div:not(.success) {
color: red;
}
否定伪类特别有用。假设我想选择所有div,除了id为container的div。上面的代码片段将完美地处理该任务。
或者,如果我想选择除段落标记之外的每个元素(不建议),我们可以这样做:
*:not(p) {
color: green;
}
:not([class])
实际上,这将选择任何没有应用css类(class=“css selector”)的对象。
我做了一个jsfiddle演示
h2{颜色:#fff}:not([class]){color:红色;背景色:蓝色}.fake类{color:绿色}<h2 class=“fake class”>fake class将为绿色</h2><h2 class=“”>空类应为白色</h2><h2>没有班级应该是红色的</h2><h2 class=“fake-class2s”>fake-cass2应为白色</h2><h2 class=“”>空class2应为白色</h2><h2>类别2不应为红色</h2>
是否支持?是:Canouse.com(2020年1月2日访问):
支持率:98.74%部分支撑:0.1%总计:98.84%
有趣的编辑,我在谷歌上搜索的是相反的:不是。CSS否定?
selector[class] /* the oposite of :not[]*/
使用:not()伪类:
用于选择除某个元素以外的所有元素。我们可以使用:not()CSS伪类。:not()伪类需要一个CSS选择器作为其参数。选择器将样式应用于除指定为参数的元素之外的所有元素。
示例:
/*此查询选择除*/div:不是(.foo){背景色:红色;}/*选择剖面元素内的所有悬停导航元素,除了对于ID为foo的nav元素*/导航部分:悬停:不(#foo){背景色:红色;}/*选择ul中非奇数的所有li元素*/ul li:不是(:第n个孩子(奇数)){颜色:红色;}<div>测试</div><div class=“foo”>测试</div><br><章节><nav id=“foo”>测试</nav><nav>悬停我</导航></section><nav></nav><br><ul><li>1个</li><li>2个</li><li>3个</li><li>4个</li><li>5个</li></ul>
我们已经可以看到这个伪类的威力,它允许我们通过排除某些元素来方便地微调选择器。此外,该伪类增加了选择器的特异性。例如:
/*此选择器具有比下面的#foo更高的特异性*/#foo:不(#bar){颜色:红色;}/*该选择器在级联中较低,但被上面的样式否决*/#食品{颜色:绿色;}<div id=“foo”>“Lorem ipsum dolor sit amet,consectetur adipiscing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。ut enim ad minim veniam,quis nostrud exerciation ullamco labour nisi ut aliquip ex ea commodo consequat。Duis aute irure dolor代表在voluptate velit esse cillum dolore eu fugiat nullapariator。除了你偶尔犯下的错误外,你还得承担责任,这是因为你在实验室里表现得很糟糕。“</div>