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

我想编写一个 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 中，我想使用此元素的元素将比不包含 “可打印的” 类的元素多得多（在上面的示例中，我发现这是另一种方式）。

答案

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

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

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

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

请的是，根据属性你在这个规则的设定，其中一些既可以由是后人继承头脑.printable ，或以其他方式影响他们的这种或那种方式。例如，虽然display不被继承，设置display: none上:not(.printable)将防止它和它的所有后代的从显示的，因为它完全消除元件和布局其子树。 visibility: hidden来解决此问题：使用 hidden 代替它可以显示可见的后代，但是 hidden 元素仍然会像最初那样影响布局。简而言之，请小心。

:not([class])

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

我做了一个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[]*/

`:not`否定伪类

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

您可以使用:not排除匹配元素的任何子集，其顺序与普通 CSS 选择器相同。

简单示例：按类别排除

div:not(.class)

将选择所有没有类.class div

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

答案

:not否定伪类

简单示例：按类别排除

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

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

浏览器支持等

`:not`否定伪类