是否有 CSS 不等于选择器?

2022-01-10 00:00:00 css-selectors html css

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

Is there something like != (not equal) in CSS? e.g, I have the following code:

input {
 ... 
 ...
}

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

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

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

and then simply skip this tag from CSS.

我该怎么做?

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

The only way I can see would be to add some class to the input tag, and rewrite the CSS as follows:

input.mod {
 ...
 ...
}

推荐答案

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

In CSS3, you can use the :not() filter, but not all browsers fully support CSS3 yet, so be sure you know what you're doing which is now supported by all major browsers (and has been for quite some time; this is an old answer...).

例子:

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

<小时>

注意:不再需要这种解决方法;我把它留在这里作为上下文.


Note: this workaround shouldn't be necessary any more; I'm leaving it here for context.

如果你不想使用 CSS3,你可以在所有元素上设置样式,然后用一个类重新设置.

If you don't want to use CSS3, you can set the style on all elements, and then reset it with a class.

input { background-color: green; }
input.avoidme { background-color: white; }

相关文章