「CSS」IDセレクタ、クラスセレクタ、タイプセレクタの優先順位のサンプル

2021年7月28日

書式
1.IDセレクタ #ID名{}
2.クラスセレクタ.classname{}
3.タイプセレクタ div{}
使用例

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<style>
#cftA{
color:red;
background-color:SkyBlue;
}
.cftB{
color:green;
background-color:red;
}
div{
color:yellow;
background-color:black;
}
</style>
<div id="cftA" class="cftB">
cftAのスタイルが適用 <br>
優先順位:IDセレクタ->クラスセレクタ->タイプセレクタ </div>
<style> #cftA{ color:red; background-color:SkyBlue; } .cftB{ color:green; background-color:red; } div{ color:yellow; background-color:black; } </style> <div id="cftA" class="cftB"> cftAのスタイルが適用 <br> 優先順位:IDセレクタ->クラスセレクタ->タイプセレクタ </div>
<style>
#cftA{ 
  color:red;
  background-color:SkyBlue;
}
.cftB{ 
  color:green;
  background-color:red;
}
div{ 
  color:yellow;
  background-color:black;
}
</style>

<div id="cftA" class="cftB">
cftAのスタイルが適用 <br>
優先順位:IDセレクタ->クラスセレクタ->タイプセレクタ </div>

 

CSS

Posted by arkgame