18

私が持っているとしましょう：

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Test for :not</title>
        <link rel="stylesheet" type="text/css" href="Test.css" />
    </head>
    <body>
        <div class="a">
            <p class="para">This line should be green.</p>
        </div>
        <div class="a">
            <p class="para">This line should also be green.</p>
            <div class="ds">
                <p class="para">This is another line that should be yellow</p>
            </div>
        </div>
    </body>
</html>

を持つすべての要素を選択したいのですが、。class="para"を持つ要素の子孫である要素は除外しclass="ds"ます。私はこのCSSを持っています：

.ds { color: grey; border-style:solid; border-width:5px;}
                
.para {color:yellow;}
                
.para:not(.ds .para) {color:green; border-style:solid; border-width:5px;} //not working

ですから、の一部として単純なセレクターしか持てないと:not(S)思いますが、持つことはできません:not (X Y)。Chrome（18.0.1025.162 m）とFirefox（10）の両方で実行しています。何か案は？

注意：クエリはより大きな問題の一部であることに注意してください。DOMから要素のリスト（たとえばwith class="para"）を選択するコード（gwt）があります。ただし、特定の要素セットの子孫である要素（たとえば、を含む要素）を除外する必要があるバグを発見しましたclass="ds"。

4

3 に答える 3

15

仕様によると、内部に単純なセレクターを含めることができます。:not

単純なセレクターは、タイプ セレクター、ユニバーサル セレクター、属性セレクター、クラス セレクター、ID セレクター、または疑似クラスのいずれかです。

そうです、子孫セレクターを持つことはできません:not(X Y)。また、子孫セレクターを使用すると、ポジティブ (「X の祖先に Y が含まれる場合」) しか表現できず、ネガティブ (「X の祖先にY が含まれない場合」) しか表現できないという問題もあります。

最も実用的な解決策は、CSS ロジックを逆にして、表現したいネガティブがポジティブになるようにすることです。

.ds .para { background:gold; }
.para { background: green }

実際に見てください。

于 2012-04-19T11:53:04.963 に答える
4

クラス "ds" を持つ要素の直接の子である要素を除く、クラス "para" を持つ要素は次のとおりです。

*:not(.ds) > .para
于 2012-04-19T11:51:56.957 に答える
1

間違ったアプローチをしているのではないかと思います。通常.paraの一致は緑で、中の一致は.ds黄色です。確かに、あなたがそれを持っている方法で、あなたはそれからもう一度境界線を取り除く必要があるでしょう、しかしそれは問題ではありません。

.ds { color: grey; border-style:solid; border-width:5px;}

.para {color:green; border-style:solid; border-width:5px;}

.ds .para {color:yellow; border-style: none; }

これは、フォーマットを解釈する自然な方法として私が見ているものと一致します。

于 2012-04-19T11:55:14.683 に答える