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 之差異??
|
B05.HTML 5, jQuery, Facebook & GWT > 04.CSS >