Html 是否有 CSS 不等于选择器？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3353968/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is there a CSS not equals selector?
提问by Alex Ivasyuv
Is there something like != (not equal) in CSS? e.g, I have the following code:
CSS 中是否有类似 != （不等于）的东西？例如，我有以下代码：
input {
...
...
}
but for some inputs I need to void this. I'd like to do that by adding the class "reset" to the input tag, e.g.
但对于某些输入，我需要取消它。我想通过将类“重置”添加到输入标签来做到这一点，例如
<input class="reset" ... />
and then simply skip this tag from CSS.
然后简单地从 CSS 中跳过这个标签。
How I can do that?
我怎么能做到这一点？
The only way I can see would be to add some class to the input tag, and rewrite the CSS as follows:
我能看到的唯一方法是向输入标签添加一些类，并按如下方式重写 CSS：
input.mod {
...
...
}
回答by Tomas Aschan
In CSS3, you can use the :not()filter, but not all browsers fully support CSS3 yet, so be sure you know what you're doingwhich is now
supported by all major browsers(and has been for quite some time; this is an oldanswer...).
在 CSS3 中，您可以使用:not()过滤器，但并非所有浏览器都完全支持 CSS3，因此请确保您知道自己在做什么，现在
所有主要浏览器都支持（并且已经有一段时间了；这是一个旧答案……）。
Example:
例子：
<input type="text" value="will be matched" />
<input type="text" value="will not be matched" class="avoidme" />
<input type="text" value="will be matched" />
and the CSS
和 CSS
input:not(.avoidme) { background-color: green; }
Note:this workaround shouldn't be necessary any more; I'm leaving it here for context.
注意：不再需要此解决方法；我把它留在这里是为了上下文。
If you don't want to use CSS3, you can set the style on all elements, and then reset it with a class.
如果你不想使用CSS3，你可以在所有元素上设置样式，然后用一个类来重置它。
input { background-color: green; }
input.avoidme { background-color: white; }
回答by AvatarKava
You can also do that by 'reverting' the changes on the reset class only in CSS.
您也可以通过仅在 CSS 中“恢复”重置类的更改来实现。
INPUT {
padding: 0px;
}
INPUT.reset {
padding: 4px;
}
回答by Andy E
CSS3 has :not(), but it's not implemented in all browsers yet. It is implemented in the IE9 Platform Preview, however.
CSS3 有:not()，但尚未在所有浏览器中实现。然而，它是在 IE9 平台预览版中实现的。
input:not(.reset) { }
http://www.w3.org/TR/css3-selectors/#negation
http://www.w3.org/TR/css3-selectors/#negation
In the meantime, you'll have to stick to the old-fashioned methods.
与此同时，你必须坚持老式的方法。
回答by Dylan Auty
You could also approach this by targeting an attribute like this:
您也可以通过定位这样的属性来解决这个问题：
input:not([type=checkbox]){
width:100%;
}
input:not([type=checkbox]){
width:100%;
}
In this case all inputs that are not 'checkbox' type will have a width of 100%.
在这种情况下，所有不是“复选框”类型的输入都将具有 100% 的宽度。
回答by Naveed
Interesting just tried this for selecting DOM element using JQuery and it works! :)
有趣的是，刚刚尝试使用 JQuery 来选择 DOM 元素，效果很好！:)
$("input[class!='bad_class']");
This page has 168 divs which does not have class 'comment-copy'
此页面有 168 个 div，没有“注释副本”类
$("div[class!='comment-copy']").length => 168
$("div[class!='.comment-copy']").length => 168
回答by Qazzian
instead of class="reset" you could reverse the logic by having class="valid" You can add this by default and remove the class to reset the style.
而不是 class="reset" 您可以通过让 class="valid" 来反转逻辑您可以默认添加它并删除类以重置样式。
So from your example and Tomas'
所以从你的例子和托马斯的
input.valid {
...
...
}
and
和
<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"/>
