CSSルールの上書きはいつ優先されますか？

Question

オーバーライドされたCSSルールが、よりCSS固有のルールより優先される理由を理解しようとしています。 !importantプロパティはありません。 （下のスクリーンショットだけでなく、コードスニペットを参照してください。）Firefoxの開発ツールで

header a { 
    color: #fff; 
} 

a, a:active, a:focus, a:hover, a:visited { 
    color: #001e62; 
    text-decoration: none; 
} 

、私はすべてのaの要素が（このスクリーンショットでは＃001e62）特定の色を持っていることがわかります。その後、すべてのheader aリンクが異なる色（この例では白）になるように指定します。 Firefoxデベロッパーツールは、aルールがheader aルールで上書きされると報告しています。ただし、ページの実際のレンダリングでは、リンクの色はより一般的なaルールで指定された色のままです。

このスクリーンショットのaタグ内のspanには、関連する色のスタイリングがありません。

重要な場合は、Windows 7でFirefox 55.0.3を使用しています。 これがなぜ起こるかについての洞察は、参考になります。この動作はこれまでのところFirefoxでしか見られません。 ChromeとIEはこれをしません。

いくつかの初期のグーグルの後、私は奇妙な継承ルールを適用したクォークモードの可能性があると考えましたが、私はちょうど標準のHTML5 DOCTYPEタグを持っています。フルスタンダードモードであること。

Answer 1

お探しのコンセプトはCSS Specificityです。

簡単に言うと、スタイルシートのすべてのルールには、ルール定義で使用されるセレクタのタイプに基づいて重みが与えられます。

これを表す一般的な方法をベース10特異性といいます。ベース-10特異性を計算するのに

は、あなたが取る：

The number of elements and pseudo-elements * 1 
+ The number of elements and pseudo-elements * 10 
+       The number of ID's * 100 
+ For inline styles       1000 
+ For !important properties (not rules)  10000 

をだから、このルールに：#mypage .rule1:hover p:before

P & :before  = 2 * 1 = 1 
.rule1 & :hover = 2 * 10 = 20 
#mypage   = 1 * 100 = 100 
For a total specificity of: 121 

一致するすべてのルールは、プロパティをオーバーライドして、最も具体的に少なくともからの特定の適用されています以前の値。

同じ特異性の複数のルールが、スタイルシートに表示される順序で適用されます。

!importantフラグを持つプロパティは、!importantフラグを持つ複数のルールがある場合にも、特定性に基づいてオーバーライドされます。

これで十分です。 base-10メソッドはブラウザで実際に使用されるのではなく、あなたの頭の中で数学を行う簡単な方法です。したがって、たとえ数学がそうでないことを示唆しているとしても、11の要素はクラスを上書きしません。