2019年9月24日(火)
[CSS3] スタイルシートの優先順位（上書き） #■パソコン・通信

　ご質問があったので、整理しておきます。自分は、!importantと:rootを、ほとんど使いませんけど。


Ａ＜Ｂ…ＡをＢに上書き


①設定の位置
外部ファイル[*.css]＜style内＜セレクタ内style

②設定の順序
　同じ設定であれば、あとに設定したスタイルに上書き。

③style内
　セレクタ＜.[class]＜#[id]

④!important
<style>
p{
color:red!important;
}
.memo{
color:blue;
}
</style>

<p>文字</p>

　文字が赤色に表示。!importantが無ければ文字は青色。
　なお、外部ファイルで!importantを指定しても、内部で上書きされます。

⑤:root
　CSS3です。IE9以降のブラウザで有効です。

（外部ファイルhtml＜:root）＜（内部html＜:root）

*＜:root*

<style>
:root{
background-color:black;
}
html{
background-color:white;
}
:rootp{
color:red;
}
p{
color:blue;
}
</style>

<p>文字</p>

　背景が黒色、文字は赤色。