個々の要素からCSS効果を削除する

Question

子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> 

Answer 1

いいえ、それはできません。

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

：

.main .exception { color: black; } 

あなたは内側の要素にスタイルを設定したい場合直接inteadメイン要素での、同じレベルで例外クラスを設定し、あなたが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> 

Answer 2

は、これは単にによって行われます：

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

これはあなたが上記の二つの親を選択する場合にのみ直接の親を、選択としてあなたがcolor: inheritを使用することはできません。このjsFiddle example

を参照してください。したがって、「手動で」色を無効にする必要があります。

@F。 Calderanの答えは、代替ですが、ブラウザのサポートは、現代のブラウザ用の変数

Answer 3

で、ちょうどすべてのdiv要素にルールを適用するが、.exception

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

（@jacktheripperにより示唆されるように）そうでない場合は、後でルールを上書き