一尘不染

是否有CSS不等于选择器?

css

CSS中是否有类似!=(不相等)的内容?例如,我有以下代码:

input {
 ... 
 ...
}

但是对于某些输入,我需要使此无效。我想通过在输入标签中添加“重置”类来做到这一点,例如

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

然后只需从CSS跳过此标签即可。

我该怎么做?

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

input.mod {
 ...
 ...
}

阅读 1225

收藏
2020-05-16

共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; }
2020-05-16