是否有 CSS 不等于选择器？

Posted 2023-03-05

【中文标题】是否有 CSS 不等于选择器？

【英文标题】：Is there a CSS not equals selector?

【发布时间】：2011-03-22 04:54:05

【问题描述】：

在 CSS 中是否有类似 != （不等于）的东西？ 例如，我有以下代码：

input 
 ... 
 ...

但是对于某些输入，我需要取消它。我想通过将“reset”类添加到输入标签来做到这一点，例如

<input class="reset" ... />

然后简单地从 CSS 中跳过这个标签。

我该怎么做？

我能看到的唯一方法是在输入标签中添加一些类，并重写 CSS 如下：

input.mod 
 ...
 ...

【问题讨论】：

你回答了你的问题，我想。将样式放入 input.mod 并在所需的输入标签中添加类“mod”。

【参考方案1】：

在 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; 

【讨论】：

天啊...我知道它的存在 :) 是的，它是！谢谢。

缺乏支持主要来自 IE8（和旧版本）。如果有人对 polyfill 感兴趣：selectivizr.com

@Guru：您可以链接多个 :not() 选择器：input:not(.avoidme):not(.avoidmetoo) 将避免使用任一类的元素，input:not(.avoidme.andme) 将避免使用 both 类的元素。

@TomasLycken，实际上，在 CSS 中使用多个选择器是一个棘手的问题，例如:not(.this.that) 可以工作，但是如果您执行诸如 :not(.this, .that) 之类的操作，您会跌倒，您必须将它们串起来，例如：:not(.this):not(.that)。我知道你可能知道这一点，我正在努力帮助未来的读者:)

在这里为未来的读者留下评论：@SamSwift웃 的评论仍然准确，但support for lists is (maybe) coming in the future。不过目前，:not() 中仅支持单个选择器。

【参考方案2】：

你也可以通过定位这样的属性来解决这个问题：

input:not([type=checkbox]) width:100%;

在这种情况下，所有非“复选框”类型的输入都将具有 100% 的宽度。

【参考方案3】：

有趣的是，刚刚尝试使用 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

这和 CSS 有什么关系？

@devlincarnate "CSS" 选择器已融入 JS (circa 2013)，因此人们会搜索它。

【参考方案4】：

而不是 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"/>

【讨论】：

我认为能够通过应用到一个类来“重置”的整个想法是不应该具有默认样式的元素数量大大超过了应该的元素数量，所以 OP 没有'不想将 any 类应用于大多数元素。

【参考方案5】：

CSS3 有:not()，但还没有在所有浏览器中实现。不过，它是在 IE9 平台预览版中实现的。

input:not(.reset)  

http://www.w3.org/TR/css3-selectors/#negation

与此同时，您必须坚持使用老式方法。

【参考方案6】：

您也可以通过仅在 CSS 中“还原”重置类的更改来做到这一点。

INPUT  
    padding: 0px;

INPUT.reset 
    padding: 4px;