我想编写一个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否定伪类
否定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否定伪类
否定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()伪类:
用于选择除某个元素以外的所有元素。我们可以使用: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>
通常,向:not()伪类添加一个类选择器,如下所示:
:not(.printable) {
/* Styles */
}
:not([attribute]) {
/* Styles */
}
但是,如果您需要更好的浏览器支持(IE8和更旧版本不支持:not()),您可能最好为具有“可打印”类的元素创建样式规则。如果尽管您对实际标记做了什么,但这仍然不可行,那么您可能必须围绕这一限制进行标记。
请记住,根据您在此规则中设置的财产,其中一些属性可能由可打印的后代继承,或者以某种方式影响它们。例如,尽管display不是继承的,但在:not(.propprinted)上设置display:none将阻止它及其所有子体显示,因为它将从布局中完全删除元素及其子树。您通常可以通过使用visibility:hidden来解决这个问题,这将允许显示可见的子体,但隐藏的元素仍然会像最初那样影响布局。简而言之,就是要小心。