0

このアイデアを CSS で記述するにはどうすればよいですか。

ElementA 内にあり、ElementB 内にない ElementA 内のすべての要素を選択します。ElementB は ElementA 内にあります。

次に例を示します。

<table id="ElementA">
    <tr>
        <td>
            <p>Paragraph One</p>
        </td>
        <td class="ElementB">
            <p>Paragraph Two</p>
        </td>
    </tr>
</table>

段落 2 の色を変更せずに、テキスト「段落 1」を「色: 赤」に変更してみてください。

私は試した：

#ElementA *:not(.ElementB *) {
    color: #ff0000;
}

これは宿題ではありません。Twitter Bootstrap は、マップ上のコントロールの max-width および line-height プロパティを変更することで、Google マップをいじっています。ブートストラップを情報ウィンドウ (開いているときは要素内) に適用しますが、ズーム コントロールや距離スケールには適用しません。

編集 1: ソリューションの使用方法のより良い例は、おそらく次のとおりです。

<div id="ElementA">
    <div>
        <p>Paragraph One</p>
    </div>
    <div class="ElementB">
        <div>
            <p>Paragraph Two</p>
            <h1>text</h1>
        </div>
    </div>
</div>

目標: ElementB の要素を除く、ElementA のすべての要素に CSS プロパティを適用します。

4

2 に答える 2

0

使用できます

#ElementA td:not(.ElementB)  p{
    color: #ff0000;
}

ここでフィドル

新しい例。div とさまざまな構造を使用

さて、後で投稿した新しい例については、この他のソリューションを使用できます。とても似ている

為に

<div id="ElementA">
    <div>
        <p>Paragraph One</p>
    </div>
    <div class="ElementB">
        <div>
            <p>Paragraph Two</p>
            <h1>text</h1>
        </div>
    </div>
</div>

使用する

 #ElementA >div:not(.ElementB)  {
    color: #ff0000;
}

または、より具体的にしたい場合

#ElementA >div:not(.ElementB) p {
        color: #ff0000;
    }

両方ともうまくいきます！

ここに対応するフィドル

覚えておいてください： not セレクターは、括弧内の複合セレクターで期待どおりに機能します

于 2013-04-26T19:08:34.653 に答える