Question

我想编写一个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中，将会有更多不具有“可打印”类的元素而不是（我意识到它是在上面的例子中反过来说。）

Answer 1

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

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

但是如果您需要更好的浏览器支持（IE8及更早版本不支持:not()），那么您可能最好为做具有“可打印”的元素创建样式规则类。如果你对实际标记的说法不尽如人意，那么你可能必须围绕这个限制来制作你的标记。

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

Answer 2

: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>

是否支持此功能？ Yes : Caniuse.com (accessed 25 Aug 2014)：

支持率：88.85％
部分支持：4.36％
总计：93.21％

有趣的编辑，我是谷歌搜索的相反：不。 CSS否定？

selector[class]  /* the oposite of :not[]*/

Answer 3

`:not`否定伪类

否定CSS伪类:not(X)是一种功能符号以简单的选择器X为参数。它匹配一个元素没有参数表示。 X不得包含另一个否定选择器。

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

简单示例：按类

排除

div:not(.class)

选择所有div元素而不使用课程.class

＆＃13;

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

＆＃13;

<div>Make me red!</div>
<div class="class">...but not me...</div>

＆＃13;

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

:not(div) > div

会选择所有div元素，这些元素不属于另一个div

的子元素

＆＃13;

div {
  color: black
}
:not(div) > div {
  color: red;
}

＆＃13;

<div>Make me red!</div>
<div>
  <div>...but not me...</div>
</div>

＆＃13;

复杂示例：链接伪选择器

除了无法链接/嵌套:not选择器和伪元素之外，您可以与其他伪选择器一起使用。

＆＃13;

div {
  color: black
}
:not(:nth-child(2)){
  color: red;
}

＆＃13;

<div>
  <div>Make me red!</div>
  <div>...but not me...</div>
</div>

＆＃13;

Browser Support等

:not是CSS3 level selector，支持方面的主要例外是 IE9 +

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

:not()伪允许写入无用的选择器。对于实例:not(*|*)，它根本不代表任何元素，或者 foo:not(bar)，相当于foo但更高特异性。

Answer 4

我认为这应该有效：

:not(.printable)

来自"negative css selector" answer。

Answer 5

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

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

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

Answer 6

示例

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

//不透明度0.6全部＆＃34;部分 - ＆＃34;但不是＆＃34; section-name＆＃34;

Answer 7

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

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

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

Answer 8

如果您希望特定的类菜单如果缺少类已登录，则具有特定的CSS：

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

Answer 9

使用`: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>

Answer 10

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

X：否（选择器）
1. div：not（#container）{
2. 颜色：蓝色;
3. }

否定伪类特别有用。让我们说我想要选择所有div，除了id为容器的div。上面的代码片段将完美地处理该任务。

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

1. *:not(p) {
2. color: green;
3. }

我可以编写一个CSS选择器来选择没有某个类的元素吗？

10 个答案:

`:not`否定伪类

简单示例：按类

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

复杂示例：链接伪选择器

Browser Support等

使用`:not()`伪类：

示例：

我可以编写一个CSS选择器来选择没有某个类的元素吗？

10 个答案:

:not否定伪类

简单示例：按类

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

复杂示例：链接伪选择器

Browser Support等

使用:not()伪类：

示例：

`:not`否定伪类

使用`:not()`伪类：