Home / CSSの基本 / スタイルの優先順位

スタイルの優先順位


スタイルシートは、
 ・スタイルシートの作成した「作成者」
 ・ブラウザに任意のスタイルシートを適用できる「ユーザー」
 ・デフォルトのスタイルシートを適用する「ブラウザー」
の三者から、同時にスタイルシートが適用される可能性があります。

スタイルシートが競合する場合の優先順位は、次のようになっています。

::: スタイルシート優先順位 :::
「作成者」 > 「ユーザー」 > 「ブラウザ」


通常は「ユーザー」よりも「作成者」が優先されますが、「!important」を使用することで、これを逆転させることもできます。

「!important」は、優先させたい「プロパティ: 値」の後に指定します。

 例)p { font-size: 20pt !important };

「!important」は、「作成者」のスタイルシートでも使用でき、これも競合する可能性があります。
この場合は「ユーザー」のスタイルシートが優先されます。

::: 「!important」使用のスタイルシート優先順位 :::
「ユーザー(!important使用)」 > 「作成者」 > 「ブラウザ」

また、同じスタイルシート内で「!important」を使ってスタイルを優先させることができます。

一般的にはより細かい部分で指定しているスタイルが優先されますが、それでも競合してしまう場合は、より後に指定されたスタイルが優先されます。




関連項目