選擇器 (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>
最後,祝大家聖誕節快樂~~~