CSS Selectorで何が問題になりますか？

Question

divの中にdivがあります。 .wrapperは、.levelの親です。

<div class="wrapper"> 
    <div class="level"> 
    Engkus Kusnadi 
    </div> 
</div> 

私は.wrapperで.levelにスタイルを与えたセレクタ、その作業罰金と背景が緑に変わっています。

私はその何も起こらない、赤にスタイルにのみ .levelセレクタの背景を追加しています

.wrapper .level { 
    background:green; 
} 

しかし見つかった問題で、。

.wrapper .level { 
    background:green; 
} 

.level { 
    background:red; 
} 

ここでは私のバイオリンは私が間違っている何https://jsfiddle.net/vcb4eqy4/

ですか？ CSS Selectorのレベルが上がっていますか？

Answer 1

あなたの問題はここにある：

.wrapper .level { 
    background:green; 
} 

.level { 
    background:red; 
} 

.wrapper .levelルールを定義することで、あなたは.levelより具体的なルールを定義しています。競合するルールがある場合は、より具体的なルールが適用されます。

たとえば以下のようにコードを変更し

、あなたはそれが何を意味するのか表示されます。

.wrapper .level { 
    background:green; 
} 

div.wrapper .level { 
    background:red; // this is now more 'specific' 
} 

あなたはこれらの仕様の詳細を理解するためにthis articleを読むことができます。