有没有CSS不等于select器？

在CSS中有没有像！=（不等于）？ 例如，我有以下代码：

input { ... ... } 

但是对于一些input，我需要将其作废。 我想通过添加类“重置”到input标签，例如

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

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

我怎么能做到这一点？

我能看到的唯一方法是将一些类添加到input标记，并重写CSS，如下所示：

 input.mod { ... ... } 

Answer 1

在CSS3中，你可以使用:not()filter， 但是并不是所有的浏览器都完全支持CSS3，所以要确保你知道你现在正在做什么 ，现在所有的主stream浏览器都支持这个过滤器了是一个旧的答案…）。

例：

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

Answer 2

您也可以通过仅在CSS中“恢复”重置类的更改来实现这一点。

 INPUT { padding: 0px; } INPUT.reset { padding: 4px; } 

Answer 3

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

 input:not(.reset) { } 

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

同时，你必须坚持老式的方法。

Answer 4

有趣的只是试图使用JQueryselectDOM元素，它的工作原理！ 🙂

 $("input[class!='bad_class']"); 

这个页面有168个div没有class comment-copy

 $("div[class!='comment-copy']").length => 168 $("div[class!='.comment-copy']").length => 168 

Answer 5

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

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

在这种情况下，所有不是“checkbox”types的input将具有100％的宽度。

Answer 6

而不是class =“reset”，你可以通过让class =“valid”来反转逻辑。你可以默认添加这个，并删除类来重置样式。

所以从你的例子和Tomas'

 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"/>