我想编写一个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否定伪类
否定CSS伪类:not(X)是一种函数表示法以简单选择器X作为参数。它匹配的元素不由参数表示。X不能包含另一个否定选择器。
您可以使用:不排除匹配元素的任何子集,就像普通CSS选择器一样排序。
简单示例:按类排除
div:不是(.class)
将选择没有class.class的所有div元素
div:不是(.class){颜色:红色;}<div>让我红起来</分区><div class=“class”>。。。但不是我…</div>
复杂示例:按类型/层次结构排除
:not(div)>div
将选择不是另一个div的子元素的所有div元素
第二部分{颜色:黑色}:not(div)>div{颜色:红色;}<div>让我红起来</分区><div><div>。。。但不是我…</div></div>
复杂示例:链接伪选择器
除了不能链接/嵌套:不是选择器和伪元素这一明显的例外,您可以与其他伪选择器一起使用。
第二部分{颜色:黑色}:not(:第n个孩子(2)){颜色:红色;}<div><div>让我红起来</分区><div>。。。但不是我…</div></div>
浏览器支持等。
:不是CSS3级别选择器,支持方面的主要例外是IE9+
该规范还提出了一个有趣的观点:
:not()伪函数允许编写无用的选择器。对于instance:not(*|*),表示根本没有元素,或foo:not(bar),它相当于foo,但具有更高的值特异性。
: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(.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;
}