我想编写一个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中,没有“可打印”类的元素将比没有“可”类的多得多(我意识到在上面的示例中是相反的)。


当前回答

如果您希望特定的类菜单在缺少类登录时具有特定的CSS:

body:not(.logged-in) .menu  {
    display: none
}

其他回答

正如其他人所说,您只需输入: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()的上述答案在角度形式上非常有效,而不是创建效果或调整视图/DOM一样,

input.ng-invalid:not(.ng-pristine) { ... your css here i.e. border-color: red; ...}

确保在加载页面时,如果添加了数据(即不再原始)但无效,则输入字段将仅显示无效(红色边框或背景等)。

您可以使用前面提到的:not(.class)选择器。

如果您关心Internet explorer兼容性,我建议您使用http://selectivizr.com/.

但请记住在apache下运行它,否则您将看不到效果。

通常,向:not()伪类添加一个类选择器,如下所示:

:not(.printable) {
    /* Styles */
}

:not([attribute]) {
    /* Styles */
}

但是,如果您需要更好的浏览器支持(IE8和更旧版本不支持:not()),您可能最好为具有“可打印”类的元素创建样式规则。如果尽管您对实际标记做了什么,但这仍然不可行,那么您可能必须围绕这一限制进行标记。

请记住,根据您在此规则中设置的财产,其中一些属性可能由可打印的后代继承,或者以某种方式影响它们。例如,尽管display不是继承的,但在:not(.propprinted)上设置display:none将阻止它及其所有子体显示,因为它将从布局中完全删除元素及其子树。您通常可以通过使用visibility:hidden来解决这个问题,这将允许显示可见的子体,但隐藏的元素仍然会像最初那样影响布局。简而言之,就是要小心。

: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,但具有更高的值特异性。