iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 22
0
Modern Web

挑戰 CSS 30 天系列 第 22

day22_選擇器 (selector)

  • 分享至 

  • xImage
  •  

選擇器 (selector) 包含:Class 與 ID

Class 的宣告法,是先放一個句點 (.),之後再列出選擇器名稱。設定一個 Class 選擇器的語法如下:
.【Class 名稱】{
屬性:設定值;
...
}

ID 的宣告法,是先放一個井字號 (#),之後再列出選擇器名稱。設定一個 ID 選擇器的語法如下:
#【ID 名稱】{
屬性:設定值;
...
}

Class 與 ID 不同的地方是:

  1. ID 在一個 HTML 文件中只能被使用一次,而 Class 選擇器在一個 HTML 文件中可以被使用多次。
  2. ID 選擇器可以被 Javascript 中的 GetElementByID 函數所運用,而 Class 選擇器無法被 Javascript 運用到。

範例如下:

<!DOCTYPE html>
<html>
<head>
  <title>CSS 選擇器 (selector)</title>
  <meta charset="utf-8">
  <style type="text/css">
	.navbar { 
		color:#0000FF; 
	}
	b.special { 
		color:#0000FF; 
	}
	i.special { 
		color:#FF0000; 
	}
	.applylarge { 
		font-size:20px; 
	}
	.applyred { 
		color:#FF0000; 
	}
	#footer { 
		color:#FF00FF; 
	}
  </style>
</head>
<body>
    <p class="navbar">我是 Class 選擇器的例子。</p>
	這個例子顯示出 <b class="special">同一個選擇器</b>可以<i class="special">同時有好幾個不同的物件 (instance)。</i>
	<p class="applylarge applyred">我是多重 Class 的例子。</p>
	<p id="footer">我是 ID 選擇器的例子。</p>
</body>
</html>

最後,祝大家聖誕節快樂~~~/images/emoticon/emoticon57.gif


上一篇
day21_繼承
下一篇
day23_div&span
系列文
挑戰 CSS 30 天30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言