MIS 腳印 logo

MIS 腳印

記錄 IT 學習的軌跡

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

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

CSS

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

範例

通用選擇器 *

選取所有元素。

CSS:

* {
    background-color: skyblue;
}

HTML:

<h6>h6</h6>
 
<div>div</div>
 
<p>p</p>
h6
div
p

類型選擇器 E

選取 <div> 元素。

CSS:

* {
    background-color: skyblue;
}

HTML:

<h6>h6</h6>

<div>div</div>

<p>p</p>
h6
div
p

ID 選擇器 #idname

選取 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 屬性值等於 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

屬性選擇器​

用來選取 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"

發表迴響