Question

在CSS中有类似！=（不相等）的东西吗？例如，我有以下代码：

input {
 ... 
 ...
}

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

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

然后只需从CSS中跳过此标记。

我怎么能这样做？

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

input.mod {
 ...
 ...
}

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

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

有趣的只是尝试使用JQuery选择DOM元素，它的工作原理！：）

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

此页面有168个div，没有“comment-copy”类

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

Answer 5

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

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

在这种情况下，所有非“复选框”类型的输入都将具有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"/>

是不是CSS不等于选择器？

6 个答案: