CSSセレクターの優先順位とは何ですか

CSS セレクターの優先順位は次の順序で決定されます: 特異性 (ID > クラス > タイプ > ワイルドカード) ソースの順序 (インライン > 内部スタイル シート > 外部スタイル シート > ユーザー エージェント スタイル シート)宣言の順序 (後の宣言が優先されます) 重要度 (!重要により優先順位が高くなります)

#CSS セレクターの優先順位

CSSセレクターの優先順位は、複数のセレクターが要素に適用される場合にどのセレクターが使用されるかを決定します。より高い優先順位を持つセレクターは、より低い優先順位を持つ同じタイプのセレクターをオーバーライドします。

CSS セレクターの優先度は、高から低の順に並べた次の 4 つの側面によって決定されます。

1. 具体性は選択によって決定されます。セレクターで使用されるセレクター タイプの数と位置によって決まります。次のタイプのセレクターは、より詳細性が増しています:

ID セレクター (#)

クラス セレクター (.)

• タイプ セレクター (html、本文など)
• ワイルドカード (*)
• 2. ソースの順序

2 つのセレクターの詳細度が同じ場合、ソース セレクターの詳細度が高くなります。ソースの優先度が高くなります。ソースの順序は次のとおりです。

インライン スタイル

内部スタイル シート

• 外部スタイル シート
• ユーザー エージェント スタイル シート
• 3. 宣言の順序

2 つのセレクターの詳細性とソースの順序が同じ場合、CSS ドキュメント内で後から記述された宣言が優先されます。

4. 重要度

!重要 キーワードにより、セレクターの優先順位を強制的に高めることができます。ただし、CSS の保守性が損なわれるため、その使用は避けてください。

例:

次の例は、優先順位の適用を示しています:

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

.bold {
  color: blue;
}

p {
  color: green;
}

body {
  color: black;
}

p.bold {
  color: purple !important;
}</code>

上の例では、

p.bold

には特殊性 2 (型セレクター クラス セレクター) があり、#! important

が宣言に含まれているため、最も高い優先順位を持ちます。したがって、クラス

p.bold の段落には、#primary の代わりに p.bold のスタイル (紫) が適用されます (特異度 1)。 )、.bold (特異度は 1)、または p (特異度は 0)。

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