HTMLに触れることなくCSSクラスをオーバーライドする方法

Question

私は非常に単純なコードペインを書いて、h1要素内のcssクラスを上書きしようとしました。

でも、H1の周りにdivを追加することはできますが、H1 htmlに触れることはできません。それは可能ですか？

override H1 css with surrounding div

[1]: http://codepen.io/Satearn/pen/grWjGJ 

.b2 
 
{color:green;} 
 
.a1 
 
{color:red;}

<div class="b2"> 
 
<h1 class="a1">Hello</h1> 
 
</div>

Answer 1

、あなたはどちらかは、元のルール後にそれを置く、または新しいルールのspecificity以降を使用する必要があります。

どちらの場合も同じ要素を選択する必要があります。そうでない場合は、子要素の規則は常に高い優先度になります。あなたのケースでは

オーバーライドルールはシンプルになりますので、あなたは、さまざまな要素を選択している：

.a1 {color:green;} 

か、あなたは色を上書きしたい場合は、親は.b2あるのみ：

.b2 .a1 {color:green;} 

もし

わからないあなたCodePenで.b2.a1はタイプミスですが、それは唯一の<div class="b2 a1"></div>のような両方b2とa1クラスを持つ要素を選択します。

Answer 2

はい、もちろんそれは可能です。セレクタを次のように変更するだけです。

つまり、スペースを追加します。

.b2.a1（スペースなし）は、両方のクラスがあなたのケースでは必要でないものすべてに適用されます。

このセレクタ、しかし： - あなたが必要な正確に何である（スペース付き）.b2 .a1は、そのクラスA1 とある.b2クラスを持つすべての要素の子孫である任意の要素に適用されます。 CSSルールを上書きする