4

特定のクラスの子孫ではないスパンを選択したいので、「いいえ」としましょう。これが私のCSSです：

div:not(.no) span{background-color:#00f;}

ここにHTMLがあります

<div>
    <span>yes 1</span>
</div>
<div class="no">
        <span>no 1</span>
</div>
<div class="no">
    <div>
           <span>no 2</span>
    </div>
</div>

2 つの質問:

  1. CSS が yes 1 と no 2 の両方に適用されるのはなぜですか?

  2. ユニバーサル セレクターに切り替えると、全体が壊れてしまうのはなぜですか?

    *:not(.no) span{background-color:#00f;}

JSFiddle のコードは次のとおりです: http://jsfiddle.net/stephaniehobson/JtNZm/

4

3 に答える 3

8

  1. span要素の親要素は両方とも、他の祖先が持っているかどうかに関係なくdiv、 classを持っていません:no

    <div> <!-- This is div:not(.no), pretty much a given -->
    <span>yes 1</span>
</div>

    <div class="no"> <!-- In this case, although this is div.no... -->
    <div>        <!-- ... this is div:not(.no)! -->
           <span>no 2</span>
    </div>
</div>

  2. and要素の祖先であるhtmlandの両方は、ユニバーサル セレクターを使用する場合 (または、タイプ セレクターを省略した場合) を満たします。これにより、すべての要素が背景色になります。bodydivspan*:not(.no)span

bodyこれに対する 1 つの解決策は、最上位のdiv要素が常にの子である場合、子コンビネータを使用して否定フィルタを要素に固定することbodyです。

body > div:not(.no) span { background-color: #00f; }

jsFiddle デモ

もう 1 つの解決策は、単純にオーバーライド スタイルを使用することです。

于 2011-12-16T22:08:09.997 に答える
4

ボルトクロックは正しいです。セレクターを次のように表現すると、より理にかなっている可能性があります。

値に単語が含まれていない要素 の 子孫である任意のspan要素を選択します。
div
classno

spanあなたの例で選択された各s は、実際には、値に単語divがclass含まれていないから派生していますno。2 番目の s も、値に単語が含まれている から派生しているという事実divは、前の値を否定しません (ha!)声明。classno

興味深いのは、秒noを 1 レベル下に移動してspanも、秒は一致するということです。CSS には要素の近接性という概念がないためdiv、セレクターに「近い」かどうかに関係なく、任意の祖先がセレクターに一致するのに十分なはずですspan。

于 2011-12-17T03:26:47.397 に答える
0

最良の選択は、ステートメントを 2 つに分割することだと思います。

div span { background-color:#00f; }
.no span { background-color:#fff; }

ここで効果を確認できます: http://jsfiddle.net/JHTqp/

于 2011-12-16T22:24:12.323 に答える