CSSセレクターの優先順位は何ですか? CSS の基本的なセレクターの優先順位の紹介

cssにはセレクターの種類がたくさんあるので、当然優先順位の概念が出てきますが、ではcssセレクターの優先順位はどうなるのでしょうか？この記事では、CSS セレクターの優先順位について説明します。早速、本文に進みましょう。

CSS セレクターの優先順位を確認する前に、基本的な CSS セレクターとはについて簡単に説明しましょう。

1. タグ セレクター (body、div、p、ul、li など)

2. ID セレクター (id="name"、id="name_txt" など)

3. クラス セレクター (例: id="name",id="name_txt")

4. 子孫セレクター (例: 親からの #head .nav ul li子孫セット セレクター)

5. 子要素セレクター (例: div>p、大なり記号>)

6. 疑似クラス セレクター (例: リンク スタイル、疑似-要素のクラス、4 つの異なる状態: リンク、訪問済み、アクティブ、ホバー)

基本的な CSS セレクターの種類を読んだ後、 css priority の概念を見てみましょう。

2 つのルールが同じ HTML 要素に適用される場合、定義された属性が競合する場合、どちらの値を使用するか、どちらの値が使用されるかが優先されます。

CSS セレクターの優先順位のアルゴリズムを見てみましょう:

各ルールは最初の「4 桁の数字」: 0、0、0、0 に対応します。
インラインセレクタの場合は 1, 0, 0, 0 を加算
ID セレクタの場合は 0, 1, 0, 0 を加算
クラスセレクタ/疑似クラスセレクタの場合、それぞれ 0 を追加、0、1、0
要素セレクターの場合は、それぞれ 0、0、0、1 を追加します
アルゴリズム: 各ルールのセレクターに対応する数値を加算して、「4-桁数」は左から右に比べて大きい方が優先されます。

上記の内容を読んだ後、css セレクターの優先順位の具体的な順序を見てみましょう。

CSS セレクターの優先順位は、最高から最低まで次のとおりです。

1.id セレクター (#myid)

2.Class セレクター(.myclassname)

3. タグ セレクター (div, h1, p)

4. 子セレクター (ul < li)

5. )

6. 疑似クラスの選択 (a:hover, li:nth-child)

最後に、次の点に注意してください:

!重要 優先順位は次のとおりです。最も高いですが、競合が発生した場合は「4 桁」を比較する必要があります;
優先順位が同じ場合、最も近い原則が採用され、最後のスタイルが選択されます;
継承された属性、その優先順位は最低です。

上記はこの記事の全内容です。もちろん、CSS セレクターに関する詳細については、css ユーザー マニュアル を参照してください。 。

以上がCSSセレクターの優先順位は何ですか? CSS の基本的なセレクターの優先順位の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。