2

子div.exception内のすべてのコンテンツを除いて、div.main内のすべてのテキストを灰色にします。div.exceptionは、クラスmainが親divに追加されていないかのように表示されます。

これは可能ですか？もしそうなら、どのように？ありがとう！

<style type="text/css">
.main{color: gray;}
.hello{color: red;}
</style>
<div class="main">
 <div>
  <div class="exception"><p class="hello">Hello</p><a>Link</a></div>
 </div>
 <div><p>Howdy</p></div>
 <div><a>Link</a></div>
</div>
4

3 に答える 3

5

最新のブラウザの場合、.exceptionを除くすべてのdivにルールを適用するだけです。

.main div:not(.exception) p {
    /* style for very nested div not exception */
}

それ以外の場合は、後でルールをオーバーライドします（@jacktheripperによって提案されたように）

于 2012-04-16T14:08:44.357 に答える
2

これは、次の方法で簡単に実行できます。

.main .exception {
    your styling here (e.g. color: black)
}

このjsFiddleの例を参照してください

color: inherit上記の2つの親を選択する場合、これは直接の親のみを選択するため、使用できません。したがって、「手動で」色を上書きする必要があります

@F。Calderanの答えは別の方法ですが、ブラウザのサポートはさまざまです

于 2012-04-16T14:06:03.570 に答える
1

いいえ、それは不可能です。

灰色に着色されていないように見えるようにスタイルを簡単にオーバーライドできますが、元の色が何であったかを知る必要があります。

.main .exception { color: black; }

メイン要素の代わりに内部要素にスタイルを設定し、同じレベルに例外クラスを設定する場合は、次を使用してオーバーライドできますinheit。

<style type="text/css">
.main div { color: gray; }
.main div.exception { color: inherit; }
.hello { color: red; }
</style>
<div class="main">
  <div class="exception">
    <div><p class="hello">Hello</p><a>Link</a></div>
  </div>
  <div><p>Howdy</p></div>
  <div><a>Link</a></div>
</div>
于 2012-04-16T14:09:45.090 に答える