CSS セレクターの仕様と優先順位

複数の CSS セレクターが 1 つの要素に適用される場合、ブラウザーはどのセレクターが優先されるかを決定する必要があります。これはセレクターの特異性と呼ばれます。

セレクターの特異性を決定するためのルール:

1. !重要およびインライン スタイルのオーバーライド:

   • ! important フラグで宣言されたスタイル、または style 属性を使用してインラインで宣言されたスタイルが最も優先されます。

2. 詳細度:

   • セレクターの特異性は、そのコンポーネントの数とタイプによって決まります。

     • #id の特異性は、 .classname
     • .classname は tagname
3. よりも高い特異性を持っています]

   最後のルールが優先されます:

   • 2 つのセレクターの詳細性が同じ場合、CSS ファイル内で最後に宣言されたものが優先されます。

例:

次の CSS ルールを考慮します。

body { font-size: 14px; }
#header { font-size: 16px; }

要素には、両方のルールが適用されます。ただし、#header セレクターの特異性が高いため (#id > タグ名)、フォント サイズの値 16 ピクセルが

要素に適用されます。

注:

同じ要素を異なるレベルの特異性で対象とする複数のルールがあることは珍しいことではありません。これを使用して、特定のケースに合わせてスタイルを調整したり、特定のインスタンスのグローバル ルールをオーバーライドしたりできます。