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

小开

最佳答案

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

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

但是如果你需要更好的浏览器支持（IE8及更早版本不支持:not()），你可能最好为做具有“可打印”类的元素创建样式规则。如果尽管你对实际标记说了什么，但这甚至不可行，你可能不得不围绕这个限制来处理你的标记。

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

小开

我认为这应该工作：

:not(.printable)

从“否定css选择器”答案。

小开

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

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

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

小开

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

有趣的编辑，我在谷歌搜索相反的内容：不。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（）的上述答案在角度形式中非常有效，而不是创建效果或调整视图/DOM，

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

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

小开

示例

  [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的div。上面的代码段将完美地处理该任务。

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

*:not(p) {color: green;}

小开

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

小开

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

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