1

HTMLで、要素に複数のスタイルルールが適用される場合、優先順位はどのようになりますか？

Rules that apply to an element identified by an id
Rules that apply to all elements of a particular class
Rules that apply to one or more specified tags

id> class> tagsだと思いますが、正しいですか？

4

3 に答える 3

3

id> class> tagsだと思いますが、正しいですか？

はい、そうです。

これは特異性と呼ばれます。詳細については、これとこれを参照してください。

于 2012-11-14T09:55:23.137 に答える
3

説明

（いつものように…）複数のことが関係していますが、重要な順序は次のとおりです。

  • 最も特異性の高いスタイルが使用されます
  • 同じ特異性を持つものが多い場合は、最新のものが使用されます

セレクターの順序[および/または完全性のためのcssの使用法]（およびそれらが特異性の値に追加するもの）：

  • 鬼ごっこ
  • クラス
  • id
  • インラインスタイル（経由style=""）
  • !important
  • タグ+!important
  • クラス+!important
  • id +!important
  • インラインスタイル+!important

2561つの要素/セレクターのクラスがidよりも高い特異性を持っていることを示すテストがありました。しかし、実際には、ほとんどの場合（CSSを「正しく」実行する場合）、クラスの数とcssファイル内の位置を処理します（クラスやタグに勝る利点がないため、＃idでスタイルを設定しないでください）。主に一般的なスタイルにのみ使用されます）

特異性について詳しくは、http：//coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/をご覧ください。

例

HTML：

<div id="johnny" class="walker whisky"> -- </div>

CSS：

/* example one */
div { border-color: red; } // border is red
.whisky { border-color: brown; } // now it's brown
#johnny { border-color: black; } // now it's black
div#johnny { border-color: red; } // it's red again
.walker { border-color: green !important; } // it's green

/* example two */ 
.whisky {border-color: brown; }
.whisky.walker {border-color: green; }
/* green */

/* example two */ 
.whisky.walker {border-color: brown; }
.whisky {border-color: green !important; }
/* green */

お役に立てれば。

于 2012-11-14T10:53:41.353 に答える
0

スタイルのフォーマットルールを試すには、たとえばChromeを使用することをお勧めします。ChromeはWeb Developer Pluginであるため、ルールが特定のノードに実際にどのように適用されるかについての洞察が得られます...

于 2012-11-14T09:57:03.180 に答える