day22_選擇器 (selector)

2018 iT 邦幫忙鐵人賽

DAY 22

Modern Web

挑戰 CSS 30 天系列第 22 篇

2018鐵人賽 css

小斑

2017-12-25 09:53:21

1909 瀏覽

分享至

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

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

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

Class 與 ID 不同的地方是：

ID 在一個 HTML 文件中只能被使用一次，而 Class 選擇器在一個 HTML 文件中可以被使用多次。

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>

最後，祝大家聖誕節快樂～～～