MIS 腳印

記錄 IT 學習的軌跡

CSS 基本選擇器 (Selectors) 教學範例

使用 CSS 基本選擇器 (Simple selector) 的通用選擇器、類型選擇器、ID 選擇器、Class 選擇器與屬性選擇器來選取元素,並使用範例說明。


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 屬性且值以 valuevalue- 開始的元素2

範例

通用選擇器 *

選取所有元素:

* {
    background-color: skyblue;
}
<h6>h6</h6>

<div>div</div>

<p>p</p>
h6
div
p

類型選擇器 E

選取 <div> 元素:

div {
    background-color: skyblue;
}
<h6>h6</h6>

<div>div</div>

<p>p</p>
h6
div
p

ID 選擇器 #idname

選取 id 屬性值等於 idname 的元素:
#idname {
    background-color: skyblue;
}
<div>div</div>

<div id="idname">#idname</div>

<div>div</div>
div
#idname
div

Class 選擇器 .classname

選取 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

屬性選擇器​

用來選取 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 屬性且值以 zhzh- 開始的元素:

[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"

發表迴響