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"
發表迴響