CSS ルールの優先一致_html/css_WEB-ITnose

CSS ルールは相互にオーバーライドできますが、これには慣れておく必要があります。ただし、ルールが相互にオーバーライドする可能性があり、子要素が親要素のデフォルトの動作を継承するため、CSS の競合が発生します。 CSS の競合が発生した場合は、通常、より詳細なルールを追加して、競合を解決するためにルールを表示する方法を明確にします。通常、ルールが詳細であればあるほど優先順位は高くなりますが、優先順位はどのように定義されるのでしょうか?

まず、CSS の定義位置に応じて優先順位が低い順に以下のように区別します。

Browser Default Style (ブラウザデフォルトスタイル)

外部スタイルシート

内部スタイルシート

インラインスタイル(例:スタイル) ="font -weight:bold")

位置を定義するための同じルールが、異なるタイプのセレクターの数に基づいて決定されます。セレクターの優先順位は低位から高位まで次のとおりです:

F: ユニバーサル セレクター (例: *)

E: タイプ セレクター (例: h1)

D: クラス セレクター (例: .example)

C:属性セレクター (例: [type="radio"])

B: 擬似クラス (例: hover)

A: ID セレクター (例: #example)

つまり、ID > 擬似クラス > ; 属性 > クラス > 要素 > ワイルドカード、最初にルール内の ID の数を数えます。ID の数が多いほど、ルールの優先順位が高くなります。それらが同じである場合は、疑似クラスを再度数えます。

例を見てみましょう:

article p span{  color: blue;}#red{  color: red;}

article p スパン優先度: "A=0, B=0, C=0, D=0, E=3, F=0 (000030)"

#red Priority : "A=1, B=0, C=0, D=0, E=0, F=0 (100000)" (高い!)

別の例:

#wrapper header div nav #gnavi{  list-style-type: none;}#top #hright #gnavi{  list-style-type: square;}

#wrapper header div nav #gnavi's優先度: "A=2, B=0, C=0, D=0, E=3, F=0 (200030)"

#top #hright #gnavi の優先度: "A =3, B=0, C =0, D=0, E=0, F=0 (300000)" (高い!)

さらに、最も高い優先順位は !import 属性です。すべて追加されている場合は! 重要なので、属性の数を数え続けますおよびルール内の要素。

!重要を避けられる場合は、このスタイルを拡張するのは難しすぎます。

参考リンク:

http://www.w3.org/wiki/CSS/Training/Priority_level_of_selector

http://www.hongkiat.com/blog/css-priority-level/

特に断りのない限り、このブログ記事はすべてオリジナルです。転載する場合は、リンクの形式で記事アドレスを示してください: http://harttle.com/2015/07/16/css-priority.html