より具体的なCSSルールが機能していません

Question

私のコードでは、h1のより細かいルールを#inner h1として定義し、より具体的なルールは#container h1として定義しています。しかし、もし#container h1が#inner h1の後に置かれれば、それは有効になり、#inner h1は無視されますが、より具体的であるべきではありません。

問題を理解するのに手伝ってください。

CSS：

#inner h1 { font-size:25px; } 
#container h1 { font-size:15px; } 

HTML：

<div id="container"> 
    <div id="inner"> 
    <h1>Hello World!</h1> 
    </div> 
</div> 

Answer 1

あなたの特異性のアイデアはちょっとしたものかもしれません。特異性はコンテキストフリーのアイデアでなければなりません.HTMLとは独立してCSSを読み込むことができるので、どのルールがより特定的であるかを推測するHTMLドキュメントは必要ありません。この他の有効な例を考え：

<div id="inner"> 
    <div id="container"> 
    <h1>Hello World!</h1> 
    </div> 
</div> 

このスニペットでは、あなたはinnerは、より具体的でなければならないこと、あなたの初期の推測に反するなければならないでしょう。これはあなたの解釈に必要な文脈（CSSにはない）を意味します。

重要な点は、両方のルールが等しい特異性（h1要素の子孫がidであること）であり、セレクタがより近い子孫に優先度を与えていないことです。

等しい特異性の2つのルールが適用される場合、優勝者はCSSで最後に宣言されたものです。

Answer 2

これはすべての:) CSSでの問題ではありませんが、クラスを次々に解析し、以前であれば、最後のルールはもちろん、以前よりも優先されますより具体的でないか、または重要な記述を含まない場合は、font-size：25px！important;最後のルールを上書きするか、それ以外の場合はクラスの場所を変更する

Answer 3

これらはどちらも同じ特異性を持ちますが、スタイルシートに表示される順序は適用されるスタイルルール。

ルールを構造化してより具体的なものにすることはできますが、一般的には!important修飾子から離れることになります。

詳細については、W3のCSS仕様の6.4.3 Calculating a selector's specificityを参照してください。