CSS セレクターはどのように優先順位を決定するのでしょうか?

CSS セレクターの優先度

CSS を使用して HTML 要素をスタイル設定する場合、複数のセレクターが適用される場合があります。このようなシナリオでは、ブラウザーは特定のルールに従って、どのセレクターが優先されるかを決定します。この記事では、CSS セレクター間の優先順位について説明します。

特異性

セレクターの特異性により、他のセレクターに対する優先順位が決まります。特異性は次の基準に基づいて計算されます:

• インライン スタイル ルール (最高): HTML 要素の style 属性内で定義されたスタイル。
• IDセレクター (高): 一意の ID によって要素を選択します。
• クラス セレクター (中): 特定のクラスを持つ要素を選択します。
• 要素セレクター (低): HTML タグ名によって要素を選択します。

特異性の計算

特異性は、次のように数値を割り当てることによって計算されます。

• インライン スタイル ルール: 1000
• ID セレクター: 100
• クラス セレクター: 10
• 要素セレクター: 1

関連する各基準の値を加算することで、特異性が決定されます。

優先

特異性に基づいて、次の優先規則が適用されます。

• !重要なルールとインライン スタイル ルール: これらのセレクターは最も高い優先順位を持ちます。
• 特異性: 2 つのセレクターが異なる特異性を持つ場合、次のルールが適用されます。特異性が高いほど優先されます。たとえば、ID セレクター (#id) はクラス セレクター (.classname) よりも優先されます。
• 宣言順序: 複数のセレクターが同じ詳細性を持つ場合、ルールは後で宣言されます。 CSS ファイル内のものが優先されます。

例

次の CSS ルールを考慮してください。

<code class="css">p {
  color: red;
}

#content p {
  color: blue;
}</code>

この例では、# content p セレクターには ID セレクターが含まれているため、p セレクターよりも高い特異性があります。したがって、#content 要素内のすべての要素について、color プロパティはデフォルトの赤色を上書きして青色に設定されます。

複雑な CSS コードを作成またはデバッグする場合、CSS セレクター間の優先順位を理解することが重要です。これらのルールに従うことで、目的のスタイルを適切な要素に確実に適用できます。

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