ガレコレ [Garage Collection]
2019年9月24日(火)
[CSS3] スタイルシートの優先順位(上書き) ■パソコン・通信
 ご質問があったので、整理しておきます。自分は、!importantと:rootを、ほとんど使いませんけど。


 
 
B…AをBに上書き


①設定の位置
外部ファイル[*.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;
}
:root
 
p
 
{
 
 
color:red;
}
p
 
{
 
 
color:blue;
}
</style>

<p>文字</p>

 背景が黒色、文字は赤色。
 
お問い合わせ


by Network Communication Note