CSS セレクターの優先順位はどのように決定されますか?

Web サイト構築のプロセスにおいて、CSS は Web ページのスタイルを制御するための重要な属性です。そこでこの記事では、CSSクラスセレクターとCSSの優先順位に関する関連知識をまとめて紹介します。

まず、CSS セレクターの種類をご紹介します:

1. タグ名セレクター

指定されたタグ名に従って、現在のインターフェース内でこの名前を持つすべてのタグを検索し、属性を設定します。

タグ セレクターは、現在のインターフェイス内のその名前を持つすべてのタグを選択しますが、タグがどれほど深く隠されているかに関係なく、タグ セレクターは HTML 内のタグである限り、タグを個別に選択できます。タグセレクターとして使用できます。

2. クラスセレクター

指定されたクラス名に基づいて対応するタグを見つけて、属性を設定します。

すべての HTML タグには class 属性があります。つまり、各タグはクラスを設定できます。ID セレクターを記述するときは、クラス名の前に を追加する必要があります。この規則は ID 命名規則と同じです。クラス名は特定のタグのスタイルを設定するために特別に設計されており、HTML では各タグを同時に複数のクラス名にバインドできます。

3. ID セレクター。

指定されたID名に基づいて対応するタグを見つけて、属性を設定します。

すべての HTML タグには id 属性があります。つまり、各タグは ID を設定できます。ID セレクターを記述するときは、ID の名前の前に必ず # を追加してください。一定の規範があります。 ID の名前は文字、数字、アンダースコアのみで構成できます。数字で始めることはできません。通常、スタイルを設定するだけの場合は ID を使用しません。 、IDはjsのものであるためです。

CSSの優先度を分類するにはどうすればよいですか?

一般的に言えば、セレクターが特別であればあるほど、その優先順位は高くなります。つまり、セレクターがより正確にポイントするほど、その優先順位は高くなります。

通常、タグ名セレクターの優先度を示すには 1、クラス セレクターの優先度を示すには 10、ID セレクターの優先度を示すには 100 を使用します。

たとえば、上の例では、.polaris の優先度は 10 ですが、.polaris のスパン {color:red;} のセレクターの優先度は 10 + 1 で、自然に赤い単語が表示されます。この原則を理解すると、次の優先度の計算は簡単になります:

div.test1 .span var priority 1+10 +10 +1

span#xxx .songs li priority 1+100 + 10 + 1

#xxx li Priority 100 +1

どの状況でどのセレクターを使用するかについて、異なるセレクターを使用する原則は次のとおりです。

最初: 制御するタグを正確に選択します。

2 番目: 最も適切な優先レベルのセレクターを使用します。

3 番目: HTML および CSS コードは、できるだけ簡潔で美しいものである必要があります。

以上がCSS セレクターの優先順位はどのように決定されますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。