ホームページ  >  記事  >  ウェブフロントエンド  >  CSS の特異性CSS プロパティ、重み、優先度 - CSS の特異性ルール、_html/css_WEB-ITnose

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

WBOY
WBOYオリジナル
2016-06-24 11:50:561231ブラウズ

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

外部定義は、 または