Cssセレクタ
1243 ワード
Cssには4つの基本セレクタがあります.
ワイルドカード*
ラベルセレクタ
クラスセレクタ
IDセレクタ
優先順位:
IDセレクタ>クラスセレクタ>ラベルセレクタ>ワイルドカード
すなわち、各セレクタは独自の色を指定し、最終的には最終的な色やスタイルを優先順位で決定します.
この4つのセレクタは、子孫セレクタ、交差セレクタなどの複雑な点のセレクタに組み合わせることもできます.
要するにセレクタのスタイル適用は,優先度に応じて決定され,正確なセレクタほど優先度が高い.
ワイルドカード*
ラベルセレクタ
クラスセレクタ
IDセレクタ
優先順位:
IDセレクタ>クラスセレクタ>ラベルセレクタ>ワイルドカード
すなわち、各セレクタは独自の色を指定し、最終的には最終的な色やスタイルを優先順位で決定します.
この4つのセレクタは、子孫セレクタ、交差セレクタなどの複雑な点のセレクタに組み合わせることもできます.
要するにセレクタのスタイル適用は,優先度に応じて決定され,正確なセレクタほど優先度が高い.
<style>
*{
/* : */
color:blue;
}
p{
/* : */
color:red;
}
.myClass{
/* : class , */
color:black
}
#myId{
/*ID :ID , */
color:yellow;
}
.greenColor{
color:green;
}
p.greenColor{
color:pink;
}
div span{/* : div span*/
color:silver;
}
.a1{
font-size:30pt;
}
p.a1{/* :p a1 */
font-size:10px;
}
</style>
<h1>hello world</h1>
<p> </p>
<p class="myClass"> </p>
<span id="myId">ChinaDaily Id </span>
<div>div <span>div span</span></div>
<p> p </p>
<p class="a1">class="a1" p</p>
<font class="a1">class="a1" font</font>
<div class="greenColor a1"> </div>