CSSの特異性、id対クラス

Question

idがclassよりも重み付けされている場合、idで指定されたdivのスタイルよりもclass c2スタイルが優先されるのはなぜですか？ IDセレクタが実際にCSSのクラスセレクタよりspecificity以上を提供んが

.c2 { 
 
    color: red; 
 
} 
 

 
#id1 { 
 
    color: blue; 
 
}

<ol id="id1"> 
 
    <li class="c2">test</li> 
 
    <li class="c3">test2</li> 
 
</ol>

Answer 1

、それは二つの規則が同じ要素をターゲットにしていないとして、ここでは何が起こっているのか、実際にはありません。あなたが実際に扱っているのは、要素をターゲットとするクラスセレクタです。スタイルはinheritedです。

.c3には、直接ターゲティングするルールはありませんが、親色を#id1から継承しているため、青です。逆に、.c2クラスセレクタは、それが赤であることが原因継承をオーバーライドし、そして、それに適用された、親の色を継承し、そして：

：

.c2 { 
 
    color: red; 
 
} 
 

 
#id1 { 
 
    color: blue; 
 
}

<div id="id1"> 
 
    <li class="c2">test</li> 
 
    <li class="c3">test2</li> 
 
</div>

MDN stateとして

font-familyとcolorを継承することは理にかなっています。そのため、座を設定しやすくなります要素にfont-familyを適用することによって、e-wide基本フォントを作成します。必要に応じて個々の要素のフォントをオーバーライドすることができます。すべての要素で基本フォントを個別に設定する必要があるのは本当に迷惑でしょう。

あなたがcolor: initialにしたい場合にも、実際には、この継承を防ぐことができます。

#id1 { 
 
    color: blue; 
 
} 
 

 
.c2 { 
 
    color: red; 
 
} 
 

 
.c3 { 
 
    color: initial; 
 
}

<div id="id1"> 
 
    <li class="c2">test</li> 
 
    <li class="c3">test2</li> 
 
    <li class="c4">test3</li> 
 
</div>

は、この情報がお役に立てば幸い！ :)