我可以编写一个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>
我想编写一个选择器来选择所有没有“可打印”类的元素，在这种情况下，它是nav和一个元素。
这可能吗？
注意：在我想要使用的实际HTML中，将会有更多没有“可打印”类的元素（比如我在上面的例子中意识到这是另一种方式）。
通常，你可以像下面这样将一个类选择器添加到:not()伪类中：
:not(.printable) {
/* Styles */
}
但是，如果您需要更好的浏览器支持（IE8及以上版本不支持:not() ），您最好为具有“可打印”类的元素创建样式规则。 如果即使您对您的实际标记提及的内容不可行，您也可能需要在该限制范围内使用标记。
请记住，根据您在此规则中设置的属性，其中一些可能由可.printable的后代继承，或以其他方式影响它们。 例如，尽管display不是继承的， display: none在a :not(.printable)上设置display: none会阻止它及其所有后代显示，因为它完全从布局中删除了元素及其子树。 你可以通过使用visibility: hidden这个visibility: 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> :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>上一篇: Can I write a CSS selector selecting elements NOT having a certain class?