ホームページ > 記事 > ウェブフロントエンド > 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
特異性
機能
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;} | 0,1,0,0 | クラスセレクター | |
.sjweb{color:blue;} | 0,0,1, 0 | | 子セレクター |
div + p {color:blue; } | E1+E2 | セレクターのグループ化 (グループ化) | |
.td1,a,body {color:blue } | E1+E2+E3 | Contain子孫セレクター | |
テーブル td {color:blue;} | E1+E2 | ルール: sjweb 外部定義は、 または |