我想编写一个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
}

其他回答

实例

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

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

正如其他人所说,您只需输入: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()伪类添加一个类选择器,如下所示:

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

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

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

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

使用: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(.class)选择器。

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

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