04 Class and ID

Class 選擇器

Class宣告方式，是先放一個句點(.)，之後再列出選擇器名稱。設定方式如下：

.【Class name】{

    屬性:設定值;

}


範例：

.show { 
color:#00FFFF; 
}

<p class="show">Class</p>


同時，一個Class選擇器可以有好幾個不同的物件。設定方式如下：

【Type name】.【Class name】{

    屬性:設定值;

}


範例：

li.doubleShow {
color:red;
}
b.doubleShow {
color:yellow;
}
i.doubleShow {
color:blue;
}

<li class="doubleShow">顯示li</li>
以及
<b class="doubleShow">顯示b</b>
以及
<i class="doubleShow">顯示i</i>


多重Class 選擇器

我們同時亦可以套用多個Class，舉例來說：


.show { 
color:#00FFFF; 
}
.show2 {
font-size:50px;
}

<p class="show show2">這是多重Class設定後的方式</p>


ID 選擇器

ID宣告方式，是先放一個井字號(#)，之後再列出選擇器名稱。設定方式如下:

#【ID name】{

    屬性:設定值;

}


範例:

#pop {
color:red;
}

<p id="pop">這是ID選擇器例子</p>


同時，一個ID選擇器可以有好幾個不同的物件。設定方式如下：

【Type name】#【ID name】{

    屬性:設定值;

}


範例：
i#pop2 {
font-size:50px;
color:blue;
}

<p id="pop">這是<i id="pop2">ID選擇器</i>例子</p>


Class 與 ID 之差異??

  • ID選擇器只能被使用一次。
  • Class選擇器可以被使用多次。
  • ID選擇器可以被Javascript中的getElementByID函數所運用。Class則否。
  • 兩者都對大小寫命名方式相當敏感。舉例來說，.one及.One是代表兩個不同的Class選擇器。




Comments