在 CSS 中是否有类似 != （不等于）的东西？ 例如，我有以下代码：
input {
...
...
}
但是对于某些输入，我需要取消它。我想通过将“reset”类添加到输入标签来做到这一点，例如
<input class="reset" ... />
然后简单地从 CSS 中跳过这个标签。
我该怎么做？
我能看到的唯一方法是在输入标签中添加一些类，并重写 CSS 如下：
input.mod {
...
...
}
【问题讨论】：
标签： html css css-selectors
在 CSS3 中，您可以使用 :not() 过滤器，但并非所有浏览器都完全支持 CSS3，所以请确保您知道自己在做什么
supported by all major browsers（已经有一段时间了；这是一个旧答案...）。
例子：
<input type="text" value="will be matched" />
<input type="text" value="will not be matched" class="avoidme" />
<input type="text" value="will be matched" />
和 CSS
input:not(.avoidme) { background-color: green; }
注意：不再需要这种解决方法；我把它留在这里作为上下文。
如果你不想使用 CSS3，你可以在所有元素上设置样式，然后用一个类重置它。
input { background-color: green; }
input.avoidme { background-color: white; }
【讨论】：
:not() 选择器：input:not(.avoidme):not(.avoidmetoo) 将避免使用任一类的元素，input:not(.avoidme.andme) 将避免使用 both 类的元素。
:not(.this.that) { } 可以工作，但是如果您执行诸如 :not(.this, .that) { } 之类的操作，您会跌倒，您必须将它们串起来，例如：:not(.this):not(.that)。我知道你可能知道这一点，我正在努力帮助未来的读者:)
:not() 中仅支持单个选择器。
你也可以通过定位这样的属性来解决这个问题：
input:not([type=checkbox]){
width:100%;
}
在这种情况下，所有非“复选框”类型的输入都将具有 100% 的宽度。
【讨论】：
有趣的是，刚刚尝试使用 JQuery 选择 DOM 元素，它可以工作！ :)
$("input[class!='bad_class']");
此页面有 168 个没有类 'comcopy' 的 div
$("div[class!='comcopy']").length => 168
$("div[class!='.comcopy']").length => 168
【讨论】：
[attr!="value"] 是一个 jQuery-only 选择器 api.jquery.com/attribute-not-equal-selector
而不是 class="reset" 您可以通过设置 class="valid" 来反转逻辑 您可以默认添加它并删除该类以重置样式。
所以从你的例子和托马斯的例子来看
input.valid {
...
...
}
和
<input type="text" value="will be matched" class="valid"/>
<input type="text" value="will not be matched" />
<input type="text" value="will be matched" class="valid"/>
【讨论】：
CSS3 有:not()，但还没有在所有浏览器中实现。不过，它是在 IE9 平台预览版中实现的。
input:not(.reset) { }
http://www.w3.org/TR/css3-selectors/#negation
与此同时，您必须坚持使用老式方法。
【讨论】：
您也可以通过仅在 CSS 中“还原”重置类的更改来做到这一点。
INPUT {
padding: 0px;
}
INPUT.reset {
padding: 4px;
}
【讨论】：