我想编写一个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()伪类:

用于选择除某个元素以外的所有元素。我们可以使用: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>

其他回答

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

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

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

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

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

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

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

: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[]*/

实例

  [class*='section-']:not(.section-name) {
    @include opacity(0.6);
    // Write your css code here
  }

//不透明度0.6所有“section-”,但不包括“section name”

我认为这应该奏效:

:not(.printable)

从“负css选择器”回答。