问题描述

在 CSS 中有什么像= =(不等于) 例如，我有以下代码：

input {
 ... 
 ...
}

但是对于一些输入，我需要使它失效。我想通过将”reset” 类添加到输入标签，例如

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

然后从 CSS 中跳过此标签。

我该怎么办？

我可以看到的唯一方法是将一些类添加到输入标签中，并重写 CSS，如下所示：

input.mod {
 ...
 ...
}

最佳解决方案

在 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: greeen; }
input.avoidme { background-color: white; }

次佳解决方案

您也可以通过’reverting’ 在 CSS 中重置类的更改。

INPUT { 
    padding: 0px;
}
INPUT.reset {
    padding: 4px;
}

第三种解决方案

CSS3 有:not()，但它并没有在所有浏览器中实现。然而，它在 IE9 平台预览中实现。

input:not(.reset) { }

http://www.w3.org/TR/css3-selectors/#negation

在此期间，您必须坚持使用 old-fashioned 方法。

第四种方案

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

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

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

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

参考文献

注：本文内容整合自 Google/Baidu/Bing 辅助翻译的英文资料结果。如果您对结果不满意，可以加入我们改善翻译效果：薇晓朵技术论坛。