CSS の特異性CSS プロパティ、重み、優先度 - CSS の特異性ルール、_html/css_WEB-ITnose

CSS の特異性

前述したように、CSS スタイルは特異性とポイント値の順序に従って、スタイルがいつ相互にオーバーライドされるか、または優先されるかを決定します。

要素 - 1 ポイント

クラス - 10 ポイント

識別子 - 100 ポイント

インライン スタイル - 1000 ポイント

疑問がある場合は、スタイル宣言をより具体的にすることもできます。必要に応じて、デバッグ目的で ! important 宣言を使用してください。

CSS を設定しても効果がなく、スタイルが競合するという質問が多くあります。

この種の問題は、初心者の間でよく発生します。多くの場合、CSS の重みの特異性は無視されます

特異性に関するルール、アルゴリズム、例をまとめてみました

初心者の方の参考になれば幸いです〜！

作者：Sun Jia (http://www.sjweb.cn/ リンクは切れているようです)

CSSの特異性について

CSSの特異性の特徴は、特別性とも呼ばれ、優先度を測る基準です。 CSS 値の規格であるため、詳細度は 4 桁の数値列 (CSS2 は 3 桁) で表されます。は左から右にあり、最大が左側、レベルが最初のレベルより大きく、桁の間に底がなく、レベルを超えることはできません。

複数のセレクターが同じ要素に適用される場合、最終的に最も高い Specificity 値を持つセレクターが優先されます。

セレクターの特異性値のリスト



セレクター

セレクター

構文サンプル

構文

ensample

例

特異性
機能

*E1E1 :linkE1[attr]#sID0,1,0,0クラスセレクターE1.className.sjweb{color:blue;}0,0,1, 0E1 > E1 + E2div + p {color:blue; }E1+E2セレクターのグループ化 (グループ化)E1,E2,E3.td1,a,body {color:blue }E1+E2+E3Contain子孫セレクターE1 E2テーブル td {color:blue;}E1+E2

Univers alセレクター)	*.div {幅:560px; }	0,0,0,0	タイプセレクター
td { font-size:12px;}	0,0,0,1		疑似クラスセレクター
a:link { font-size:12px;}	0,0,1,0		属性セレクター セレクター)
h[title] {color:blue;}	0,0,1,0		ID セレクター (ID セレクター)
#sj{ font -size:12px;}
			子セレクター
			ルール: 1. インラインスタイルの優先度の詳細度の値は 1,0,0,0 であり、外部定義よりも高くなります。 例: sjweb 外部定義は、 または