CSSには!=(等しくない)のようなものがありますか?たとえば、次のコードがあります:
input {
...
...
}
しかし、いくつかの入力では、これを無効にする必要があります。クラス "reset"をinputタグに追加することでそれをしたいと思います。
<input class="reset" ... />
そして、CSSからこのタグを単にスキップします。
どうすればそれができますか?
私が見ることができる唯一の方法は、入力タグにクラスを追加し、次のようにCSSを書き換えることです。
input.mod {
...
...
}
CSS3では、:not()
フィルターを使用できます。 ただし、すべてのブラウザがまだCSS3を完全にサポートしているわけではありません。 現在は すべての主要なブラウザでサポートされています (かなり以前からありました。これはold答えです...)。
例:
<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; }
また、CSSでのみリセットクラスの変更を「元に戻す」ことでもできます。
INPUT {
padding: 0px;
}
INPUT.reset {
padding: 4px;
}
CSS3には:not()
がありますが、まだすべてのブラウザーに実装されているわけではありません。ただし、IE9 Platform Previewで実装されています。
input:not(.reset) { }
http://www.w3.org/TR/css3-selectors/#negation
それまでの間、昔ながらの方法に固執する必要があります。
次のような属性をターゲットとして、これにアプローチすることもできます。
input:not([type=checkbox]){ width:100%; }
この場合、「チェックボックス」タイプではないすべての入力の幅は100%になります。
興味深いのは、JQueryを使用してDOM要素を選択するためにこれを試したところです。 :)
$("input[class!='bad_class']");
このページには168個のdivがあり、「comment-copy」クラスはありません
$("div[class!='comment-copy']").length => 168
$("div[class!='.comment-copy']").length => 168
class = "reset"の代わりにclass = "valid"を使用してロジックを逆にすることができます。これをデフォルトで追加し、クラスを削除してスタイルをリセットできます。
あなたの例とトーマスから
input.valid {
...
...
}
そして
<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"/>