三種常用的 CSS 選擇器範例程式碼

程式碼記錄：三種常用的 CSS 選擇器(CSS selector)

CSS ID selector 範例

<style type="text/css">
#P1{
    font-weight:bold;
}
#P2{
    color:green;
}
#P3{
    color:red;
}
</style>
<p id="P1">這是第一個段落，粗體字</p>
<p id="P2">這是第二個段落，綠色的字</p>
<p id="P3">這是第三個段落，紅色的字</p>

CSS Class selector 範例

<style type="text/css">
.P2 {
    font-weight:bold;
}
</style>
<p class="P1">這是第一個段落</p>
<p class="P2">這是第二個段落</p>
<p class="P3">這是第三個段落</p>

CSS Element selector 範例

<style type="text/css">
span {
color:red;
}
p {
color:blue;
}
</style>
<span>這是 span 區域的文字</span>
<p>這是 p 標籤內的文字</p>

以上程式碼為三種常用的 CSS 選擇器(CSS selector)的範例程式碼。