CSS 基本選擇器 (Selectors) 教學範例
E 為 Element (元素) 的簡稱，表示 HTML 的標籤名稱如 <h1> <p> <div> ...F 也是 Element，在同時講解二個元素時CSS 基本選擇器列表
點擊選擇器可連結至詳細說明範例
| 選擇器 | 名稱 | 說明 | CSS |
|---|---|---|---|
* |
通用選擇器 | 選取所有元素 | 2 |
E |
類型選擇器 | 選取 HTML 標籤元素 | 1 |
#idname |
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 |
範例
通用選擇器 *
選取所有元素。
CSS：
* {
background-color: skyblue;
}HTML：
<h6>h6</h6>
<div>div</div>
<p>p</p>h6
div
p
類型選擇器 E
類型選擇器就是 HTML 元素的名稱
選取 <div> 元素。
CSS：
div {
background-color: skyblue;
}HTML：
<h6>h6</h6>
<div>div</div>
<p>p</p>h6
div
p
ID 選擇器 #idname
每個網頁
可用來明確套用樣式。
id 屬性值都是唯一的可用來明確套用樣式。
id 須加上 # 前綴。選取 id 屬性值等於 idname 的元素。
CSS：
#idname {
background-color: skyblue;
}HTML：
<div>div</div>
<div id="idname">#idname</div>
<div>div</div>div
#idname
div
Class 選擇器 .classname
每個網頁 class 屬性值可重複多次
當網頁有許多元素須共用相同樣式使用。
可用空格區隔指定多值。
當網頁有許多元素須共用相同樣式使用。
可用空格區隔指定多值。
class 須加上 . 前綴。選取 class 屬性值等於 classname 的元素。
CSS：
.classname {
background-color: skyblue;
}HTML：
<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 屬性的元素。
CSS：
[title] {
background-color: skyblue;
}HTML：
<div>沒有 title 屬性</div>
<div title="one">title="one"</div>
<div title="two">title="two"</div>沒有 title 屬
title="one"
title="two"
[attr="value"]
選取有 title 屬性且值等於 two 的元素。
CSS：
[title="two"] {
background-color: skyblue;
}HTML：
<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 的元素。
CSS：
[title~="select"] {
background-color: skyblue;
}HTML：
<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 開始的元素。
CSS：
[title^="select"] {
background-color: skyblue;
}HTML：
<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 結束的元素。
CSS：
[title$="select"] {
background-color: skyblue;
}HTML：
<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 的元素。
CSS：
[title*="select"] {
background-color: skyblue;
}HTML：
<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- 開始的元素。
CSS：
[lang|="zh"] {
background-color: skyblue;
}HTML：
<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"
本著作係採用創用 CC 姓名標示-相同方式分享 3.0 台灣 授權條款授權.
非常感謝！
很高興對您有幫助。