CSS 特異性スコアはどのように計算されますか?

CSS の特異性、 は、ポイントに基づいてさまざまな CSS セレクターを区別または優先順位付けするプロセスです。最も高い特異性ポイントを持つセレクターが勝ち、セレクターの CSS スタイル要素に適用されます。

各 CSS セレクターのポイント階層とその優先順位を次の表に示します -

の中国語訳:

Sr. No.	シリアル番号	CSSセレクター	特異性スコア
1	要素セレクター	1
2	クラスセレクター	10
3	IDセレクター	100
4	インラインCSS	1000
5	要素クラスセレクター	1 10 = 11
6	要素IDセレクター	1 100 = 101

ユースケース -クラスとIDを持つ要素があり、クラスセレクターとIDセレクターを使用してそれにCSSスタイルを追加したいとします。この場合、ID セレクターはクラス セレクターよりも 10 倍具体的であるため、ID セレクターによって定義された CSS スタイルが使用されます。

ここで、コード例を使用して、これらのセレクターの違いとその優先順位を詳しく理解しましょう。

＃＃＃ステップ＃＃＃

• ステップ 1

  - 最初のステップでは、class 属性と ID 属性を使用して HTML 要素を定義します。

• ステップ 2

  - このステップでは、CSS セレクターを使用して要素を選択し、優先順位を確認することで、要素の CSS を作成します。

Example

の中国語訳は次のとおりです:

Example

次の例は、さまざまな CSS セレクターの違いとその優先順位を示しています -

リーリー

上記の例では、2 つの異なるセレクターを使用して同じ要素を選択することで、同じ要素で同じ CSS プロパティを使用しています。より詳細な点が明確にわかります。セレクターの CSS が要素に適用されます。

例 2

次の例では、CSS セレクターの特殊な点の違いについて詳しく説明します -

リーリー

上の例では、同じ CSS プロパティを再度使用しましたが、異なる CSS セレクターで異なる値を使用しました。メインの div 要素の場合、インライン セレクターと ID セレクターを使用して CSS を適用しましたが、インライン セレクターの優先度が ID セレクターよりもはるかに高いため、要素にはインライン CSS が適用されました。 h2 ヘッダーの場合、ID セレクターと要素 ID セレクターを使用しました。後者の方が CSS 固有であるため、要素 ID セレクターの CSS がその要素に適用されます。

結論

この記事では、CSS 特異性ポイントの計算を学習しただけでなく、さまざまな CSS セレクター内に記述された CSS の優先度とその特異性ポイントの違い、および手-コード例の経験に基づいて。同じ要素の CSS プロパティに異なる値を与えるために異なるセレクターを同時に選択することで、CSS セレクター間の違いを確認しました。

以上がCSS 特異性スコアはどのように計算されますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。