CSS 基本選擇器 (Selectors) 教學範例
使用 CSS 基本選擇器 (Simple selector) 的通用選擇器、類型選擇器、ID 選擇器、Class 選擇器與屬性選擇器來選取元素，並使用範例說明。
CSS 所有選擇器：
E 為 Element (元素) 的簡稱，表示 HTML 的標籤名稱如 <h1> <p> <div> ...F 也是 Element，在同時講解二個元素時CSS 基本選擇器列表
點擊選擇器可連結至詳細說明範例
| 選擇器 | 名稱 | 說明 | CSS |
|---|---|---|---|
* | 通用選擇器 | 選取所有元素 | 2 |
| 類型選擇器 | 選取 HTML 標籤元素 | 1 | |
| ID 選擇器 | 選取 id 屬性值等於 idname的元素 | 1 | |
.classname | Class 選擇器 | 選取 class 屬性值包含 classname 的元素 | 1 |
[attr] | 屬性選擇器 | 選取有 attr 屬性的元素 | 2 |
[attr="value"] | 屬性選擇器 | 選取有 attr 屬性且值等於 value 的元素 | 2 |
[attr~="value"] | 屬性選擇器 | 選取有 attr 屬性且以空格分隔的一個值等於 value 的元素 | 2 |
[attr^="value"] | 屬性選擇器 | 選取有 attr 屬性且值以 value 開始的元素 | 3 |
[attr$="value"] | 屬性選擇器 | 選取有 attr 屬性且值以 value 結束的元素 | 3 |
[attr*="value"] | 屬性選擇器 | 選取有 attr 屬性且值包含 value 的元素 | 3 |
[attr|="value"] | 屬性選擇器 | 選取有 attr 屬性且值以 value 或 value- 開始的元素 | 2 |
範例
通用選擇器 *
選取所有元素：
* {
background-color: skyblue;
}
<h6>h6</h6> <div>div</div> <p>p</p>
h6
div
p
類型選擇器 E
類型選擇器就是 HTML 元素的名稱
選取 <div> 元素：
div {
background-color: skyblue;
}
<h6>h6</h6> <div>div</div> <p>p</p>
h6
div
p
ID 選擇器 #idname
每個網頁
id 屬性值都是唯一的可用來明確套用樣式。id 須加上 # 前綴。選取
id 屬性值等於 idname 的元素：
#idname {
background-color: skyblue;
}
<div>div</div> <div id="idname">#idname</div> <div>div</div>
div
#idname
div
Class 選擇器 .classname
每個網頁 class 屬性值可重複多次當網頁有許多元素須共用相同樣式使用。
可用空格區隔指定多值。
可用空格區隔指定多值。
class 須加上 . 前綴。選取 class 屬性值等於 classname 的元素：
.classname {
background-color: skyblue;
}
<div class="classname">.classname</div> <div class="foo classname bar">.foo.classname.bar</div> <div>div</div>
.classname
.foo.classname.bar
div
屬性選擇器
屬性選擇器與 Regular Expression (正規表示法) 用法類似對正規表示法不了解的話，可能不太好理解
用來選取 HTML 的 Attribute (屬性) 與 Value (值)，例如：
div：元素。title：屬性。one：值。
<div title="one">
[attr]
選取有
title 屬性的元素：
[title] {
background-color: skyblue;
}
<div>沒有 title 屬性</div> <div title="one">title="one"</div> <div title="two">title="two"</div>
沒有 title 屬
title="one"
title="two"
[attr="value"]
選取有
title 屬性且值等於two的元素：
[title="two"] {
background-color: skyblue;
}
<div title="one">title="one"</div> <div title="two">title="two"</div> <div title="three">title="three"</div>
title="one"
title="two"
title="three"
[attr~="value"]
可用空格區隔指定多值
選取有 title 屬性且以空格分隔的一個值等於 select 的元素：
[title~="select"] {
background-color: skyblue;
}
<div title="selectone">title="selectone"</div> <div title="two">title="two"</div> <div title="three select">title="three select"</div>
title="selectone"
title="two"
title="three select"
[attr^="value"]
選取有
title 屬性且值以 select 開始的元素：
[title^="select"] {
background-color: skyblue;
}
<div title="select one">title="select one"</div> <div title="two select">title="two select"</div> <div title="selectthree">title="selectthree"</div>
title="select one"
title="two select"
title="selectthree"
[attr$="value"]
選取有
title 屬性且值以 select 結束的元素：
[title$="select"] {
background-color: skyblue;
}
<div title="one select">title="one select"</div> <div title="select two">title="select two"</div> <div title="threeselect">title="threeselect"</div>
title="one select"
title="select two"
title="threeselect"
[attr*="value"]
選取有
title 屬性且值包含 select 的元素：
[title*="select"] {
background-color: skyblue;
}
<div title="one select">title="one select"</div> <div title="select two">title="select two"</div> <div title="threeselect">title="threeselect"</div>
title="one select"
title="select two"
title="threeselect"
[attr|="value"]
典型的應用場景為語系
選取有 lang 屬性且值以 zh 或 zh- 開始的元素：
[lang|="zh"] {
background-color: skyblue;
}
<div lang="zh">lang="zh"</div> <div lang="zh-TW">lang="zh-TW"</div> <div lang="zh-CN">lang="zh-CN"</div> <div lang="en">lang="en"</div> <div lang="en-US">lang="en-US"</div>
lang="zh
lang="zh-TW"
lang="zh-CN"
lang="en"
lang="en-US"
發表迴響