72

ある種の「ない」CSSセレクターはありますか?

たとえば、CSS に次の行を記述すると、クラスclassnameを持つタグ内のすべての入力フィールドの背景が赤になります。

.classname input {
  background: red;
}

クラスclassnameのタグの外側にあるすべての入力フィールドを選択するにはどうすればよいですか?

4

8 に答える 8

53


現在のブラウザーの CSS サポートでは、それはできません。

新しいブラウザでサポートされるようになりました。詳細については、 Sam の回答を参照してください。

(CSS の代替案については、他の回答を参照してください。)


JavaScript/jQuery で実行できる場合は、次のことができます。

$j(':not(.classname)>input').css({background:'red'});
于 2009-04-07T16:16:57.447 に答える
32

Mozilla は否定疑似クラスをサポートしています:

:not(.classname) input {background: red;}

参照: http://developer.mozilla.org/en/Mozilla_CSS_support_chart

于 2009-07-10T18:14:28.793 に答える
30

negation 疑似クラスはSelectors Level 3 Recommendationにあり、最近のバージョンの Firefox、Chrome、および Safari (少なくとも) で動作することに注意してください。以下サンプルコード。

<html>
<head>
<title>Negation pseudo class</title>
<style type="text/css">
    div {
    border: 1px solid green;
    height: 10px;
    }
    div:not(#foo) {
    border: 1px solid red;
    }
</style>
</head>
<body>
    <div id="foo"></div>
    <div id="bar"></div>
    <div id="foobar"></div>
</body>
</html>
于 2011-06-09T14:58:42.170 に答える
24

「グローバル」背景を赤に設定してから、クラス名を使用して他の背景を変更しませんか?

input { background: red; }
.classname input { background: white; }
于 2009-04-07T16:09:46.390 に答える
10

私はこれをするだろう

input { /* styles outside of .classname */ }
.classname input { /* styles inside of .classname, overriding above */ }
于 2009-04-07T16:11:46.867 に答える
1

CSS で一致した要素の親を選択する方法はありません。それらを選択するには、JavaScript を使用する必要があります。

あなたの質問から、多かれ少なかれ次のようなマークアップがあると思います。

<form class="formclassname">
    <div class="classname">
        <input />  <!-- Your rule matches this -->
        <input />  <!-- Your rule matches this -->
    </div>
    <input />  <!-- You want to select this? -->
    <input />  <!-- You want to select this? -->
</form>

1 つのオプションは、上位の要素 (たとえば ) にクラスを追加し<form>、フォームのすべての入力のスタイルを設定するルールを作成することです。いいえ:

.formclassname input {
  /* Some properties here... */
}

または

.formclassname > input {
  /* Some properties here... */
}

それらが特定のクラスを持つ要素の内部にないという事実に基づいてそれらを選択したい場合は、JavaScript を使用しないとうまくいきません。

于 2009-04-07T16:09:23.380 に答える
0

他のほとんどのhtml要素とは異なり、すべてのcssプロパティをデフォルト値にリセットする方法が必ずしもないため、入力は少し面倒です。

スタイリングが重要でない場合（つまり、持つのは良いが機能には影響しない）、jQueryを使用してすべての入力の配列を取得し、それらの親をチェックしてから、そのdivの外側のスタイリングのみを実行します。何かのようなもの：

$('input').each(function() {
     if($(this).closest('.classname') == false)
     {
           // apply css styles
     }
});

（ちなみに、私はjQueryの専門家ではないので、上記でエラーが発生する可能性がありますが、原則としてこのようなものが機能するはずです）

于 2009-04-07T17:06:46.813 に答える
0

あなたが得ることができる最も近いのは、宣言で直接の子孫にのみ影響を与えることだと思います

たとえば、このコードは、クラスが「maincontent」の div の直下にある入力フィールドにのみ影響します。

div.maincontent > input {
  // do something
}
于 2009-04-07T16:18:47.053 に答える