我可以编写CSS选择器来选择没有特定类或属性的元素吗？

643

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

我想编写一个选择器来选择所有不具有“可打印”类的元素，在这种情况下，这些元素是导航和一个元素。

这可能吗？

注意：在实际的HTML中，我想使用它的地方将比不包含“可打印的”类的元素多得多（在上面的示例中，我发现这是另一种方式）。

html  css  css-selectors 
— 戴维·诺德瓦尔
source

Answers:

895

通常，您将类选择器添加到:not()伪类中，如下所示：

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

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

但是，如果您需要更好的浏览器支持（IE8和更早的版本不支持:not()），则最好为确实具有“可打印”类的元素创建样式规则。即使您对实际标记说了什么，即使这样做还是不可行，则可能必须围绕该限制来进行标记。

请的是，根据属性你在这个规则的设定，其中一些既可以由后代继承的头脑是 .printable，或以其他方式影响他们的这种或那种方式。例如，尽管display未继承，但display: none在a上进行设置:not(.printable)将阻止其及其所有后代显示，因为它将元素及其子树从布局中完全删除。您通常可以通过使用visibility: hidden替代方法来解决此问题，该方法将允许可见的后代显示，但是隐藏的元素仍然会像最初那样影响布局。简而言之，请小心。

— BoltClock
source
4
作为一点信息，浏览器对CSS的与媒体无关的方面的支持通常在各种媒体类型中都是相同的-如果浏览器:not()在屏幕上不支持，那么它也不支持印刷形式。
— BoltClock
19
请注意，:not()仅使用一个简单的选择器，这意味着它不能包含嵌套选择器，例如:not(div .printable)-请参见W3C选择器语法
— Steve Eynon
1
我只是为.active a尝试过：not（.active a）对我不起作用。但是，a：not（.active）做到了！
— user2367418
当您说它不适合您时，您可能是说它不适合您，对吧？这并不意味着它不起作用，这可能是特定情况- :not(.active)规则中的属性可能只是被优先级较高的规则中的属性所覆盖。
— 6
1
@Kilves：你确定吗？的特异性:not()是它的参数，该装置的:not(div)同样特定于div，:not(.cls)到.cls和:not(#id)到#id。
— BoltClock
179 
:not([class])

实际上，这将选择没有class="css-selector"应用CSS类（）的任何内容。

我做了一个jsfiddle演示

    h2 {color:#fff}
    :not([class]) {color:red;background-color:blue}
    .fake-class {color:green}
    <h2 class="fake-class">fake-class will be green</h2>
    <h2 class="">empty class SHOULD be white</h2>
    <h2>no class should be red</h2>
    <h2 class="fake-clas2s">fake-class2 SHOULD be white</h2>
    <h2 class="">empty class2 SHOULD be white</h2>
    <h2>no class2 SHOULD be red</h2>
展开摘要

支持吗？ 是：Caniuse.com（2020年1月2日访问）：

  • 支持度：98.74％
  • 部分支持：0.1％
  • 合计：98.84％

有趣的编辑，我在谷歌搜索：not的反义词。CSS否定？

selector[class]  /* the oposite of :not[]*/
— 米歇尔·帕特恩（Milche Patern）
source
109

该:not否定伪类

否定CSS伪类，:not(X)是一种功能表示法，采用简单的选择器X作为参数。它与参数未表示的元素匹配。X不能包含另一个否定选择器。

您可以使用:not排除匹配元素的任何子集，就像常规CSS选择器一样进行排序。

简单示例：按类别排除

div:not(.class)

将选择所有div没有类的元素.class

div:not(.class) {
  color: red;
}
<div>Make me red!</div>
<div class="class">...but not me...</div>
展开摘要

复杂的示例：按类型/层次结构排除

:not(div) > div

将选择所有其他div元素的子元素div

div {
  color: black
}
:not(div) > div {
  color: red;
}
<div>Make me red!</div>
<div>
  <div>...but not me...</div>
</div>
展开摘要

复杂的例子：链接伪选择器

除了不能链接/嵌套:not选择器和伪元素这一显着例外，您可以将其与其他伪选择器结合使用。

div {
  color: black
}
:not(:nth-child(2)){
  color: red;
}
<div>
  <div>Make me red!</div>
  <div>...but not me...</div>
</div>
展开摘要

浏览器支持等

:not是CSS3级别选择器，在支持方面主要的例外是它是IE9 +

该规范也提出了一个有趣的观点：

在:not()伪允许写入无用的选择。例如:not(*|*)，根本不表示任何元素，或者 foo:not(bar)等效foo但具有更高的特异性。

— SW4
source
3
那是一个有据可查，充分举例说明的晚饭！#thumbsup
— 乔纳森·布雷多·克里斯滕森
好的，您的示例:not(div) > div仅适用于直接父母。那其他爷爷呢？
— FindOut_Quran
很棒的信息！正是我所需要的！谢谢！
— 杰米
9

就像贡献：not（）的上述答案以角度形式非常有效，而不是创建效果或调整视图/ DOM一样， 

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

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

— BaneStar007
source
7

例

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

//不透明度0.6全部为“ section-”，但不包含“ section-name”

— 哈坎
source
2

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

如果您关心Internet Explorer的兼容性，建议您使用http://selectivizr.com/。

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

— 梅尔克星
source
3
您是什么意思在apache下运行它？Selectivizr是一个前端库，它与服务器软件无关
— Kloar 2014年
它执行ajax请求-没有http服务器就无法工作。
— MelkorNemesis 2014年
2

使用:not()伪类：

用于选择除某个元素（或多个元素）以外的所有内容。我们可以使用:not() CSS伪类。该:not()伪类需要一个CSS选择作为其参数。选择器会将样式应用于所有元素，但指定为参数的元素除外。

例子：

/* This query selects All div elements except for   */
div:not(.foo) {
  background-color: red;
}


/* Selects all hovered nav elements inside section element except
   for the nav elements which have the ID foo*/
section nav:hover:not(#foo) {
  background-color: red;
}


/* selects all li elements inside an ul which are not odd */
ul li:not(:nth-child(odd)) { 
  color: red;
}
<div>test</div>
<div class="foo">test</div>

<br>

<section>
  <nav id="foo">test</nav>
  <nav>Hover me!!!</nav>
</section>
<nav></nav>

<br>

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>
展开摘要

我们已经知道了此伪类的功能，它使我们可以通过排除某些元素来方便地微调选择器。此外，该伪类增加了选择器的特异性。例如：

/* This selector has a higher specificity than the #foo below */
#foo:not(#bar) {
  color: red;
}

/* This selector is lower in the cascade but is overruled by the style above */
#foo {
  color: green;
}
<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 exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</div>
展开摘要

— 威廉·范德文
source
0

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

body:not(.logged-in) .menu  {
    display: none
}
— 米海
source
-1

正如其他人所说，您只需输入：not（.class）。对于CSS选择器，我建议访问此链接，这对我的整个旅程都非常有帮助：https : //code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048

div:not(.success) {
  color: red;
}

否定伪类特别有用。假设我要选择所有div，但有一个容器ID的div除外。上面的代码段将完美地完成该任务。

或者，如果我想选择除段落标记之外的所有单个元素（不建议使用），我们可以这样做：

*:not(p) {
  color: green;
}
— 地基
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.