ホームページ > 記事 > ウェブフロントエンド > 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 スタイルが使用されます。
ここで、コード例を使用して、これらのセレクターの違いとその優先順位を詳しく理解しましょう。
###ステップ###- 最初のステップでは、class 属性と ID 属性を使用して HTML 要素を定義します。
- このステップでは、CSS セレクターを使用して要素を選択し、優先順位を確認することで、要素の CSS を作成します。
上記の例では、2 つの異なるセレクターを使用して同じ要素を選択することで、同じ要素で同じ CSS プロパティを使用しています。より詳細な点が明確にわかります。セレクターの CSS が要素に適用されます。
例 2
上の例では、同じ CSS プロパティを再度使用しましたが、異なる CSS セレクターで異なる値を使用しました。メインの div 要素の場合、インライン セレクターと ID セレクターを使用して CSS を適用しましたが、インライン セレクターの優先度が ID セレクターよりもはるかに高いため、要素にはインライン CSS が適用されました。 h2 ヘッダーの場合、ID セレクターと要素 ID セレクターを使用しました。後者の方が CSS 固有であるため、要素 ID セレクターの CSS がその要素に適用されます。
結論
以上がCSS 特異性スコアはどのように計算されますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。