是不是CSS不等于选择器？

Question

在CSS中有类似的东西!=(不相等)？例如,我有以下代码:

input {
 ... 
 ...
}

但是对于一些输入我需要取消这个.我想通过在输入标签中添加"reset"类来做到这一点,例如

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

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

我怎么能这样做？

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

input.mod {
 ...
 ...
}

Answer 1

在CSS3中,您可以使用:not()过滤器,但并非所有浏览器都完全支持CSS3,所以请确保您知道您正在做什么,现在 所有主流浏览器都支持(并且已经有一段时间了;这是一个老答案...).

例:

<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％。