{%hackmd @dzif24x25/yRBnguqQQl-2ylH1j5h0cg %}
# CSS 選擇器
---
## 選擇器 (Selector)
可用來選擇欲影響的元素
---
## 常見的選擇器種類
* 基本選擇器
* 分組選擇器
* 組合選擇器
* 偽選擇器
---
## 基本選擇器
---
## 基本選擇器 包含以下幾種選擇器
* 元素選擇器 (Type selector)
* Class 選擇器 (Class selector)
* ID 選擇器 (ID selector)
* 屬性選擇器 (Attribute selector)
* 通用選擇器 (Universal selector)
---
## 元素選擇器 (Type selector)
指定所有 HTML 元素中的特定元素
---
## 語法
```css
元素 { 屬性值 }
```
---
範例：選取所有 `<h1>` 元素，將其文字顏色改為<font style="color: #76b900;">#76b900</font>
<iframe height="600" style="width: 100%;" scrolling="no" title="Type selector" src="https://codepen.io/alpha34727/embed/RwqNPrE?default-tab=css%2Cresult&editable=true" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/alpha34727/pen/RwqNPrE">
Type selector</a> by Alpha (<a href="https://codepen.io/alpha34727">@alpha34727</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>
---
### Class 選擇器 (Class selector)
指定有特定CSS的HTML元素
---
## 語法
```css
.Class名稱 { 屬性值 }
```
---
範例：選取有`vram-size` Class 的 HTML 元素，將其文字顏色改為<font style="color: red;">紅色</font>
<iframe height="600" style="width: 100%;" scrolling="no" title="Class selector" src="https://codepen.io/alpha34727/embed/yLQyNVV?default-tab=css%2Cresult&editable=true" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/alpha34727/pen/yLQyNVV">
Class selector</a> by Alpha (<a href="https://codepen.io/alpha34727">@alpha34727</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>
---
## ID 選擇器 (ID selector)
指定有特定ID的HTML元素
---
## 語法
```css
.ID名稱 { 屬性值 }
```
---
範例：指定有 `title` ID 的 HTML 元素，將其文字顏色改為<font style="color: red;">紅色</font>
<iframe height="600" style="width: 100%;" scrolling="no" title="ID selector" src="https://codepen.io/alpha34727/embed/NWEPqpG?default-tab=css%2Cresult&editable=true" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/alpha34727/pen/NWEPqpG">
ID selector</a> by Alpha (<a href="https://codepen.io/alpha34727">@alpha34727</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>
---
### 屬性選擇器 (Attribute selector)
指定含有特定屬性的 HTML 元素
---
## 語法
選取有<font color=red>屬性</font> `attr` 的 HTML 元素
```css
[attr] { 屬性值 }
```
---
## 語法
選取有屬性 `attr` ，且<font color=red>屬性值為</font> `value` 的 HTML 元素
```css
[attr=value] { 屬性值 }
```
---
## 語法
選取有屬性 `attr` ，屬性值以<font color=red>空格分割</font>屬性值，其中至少一個元素為 `value`
```css
[attr~=value] { 屬性值 }
```
---
## 語法
選取有屬性 `attr` ，且屬性值以 `value` 或 `value-` <font color=red>開頭</font>的 HTML 元素
```css
[attr|=value] { 屬性值 }
```
---
## 語法
選取有屬性 `attr` ，且屬性值以 `value` <font color=red>開頭</font>的 HTML 元素
```css
[attr^=value] { 屬性值 }
```
---
## 語法
選取有屬性 `attr` ，且屬性值以 `value` <font color=red>結尾</font>的 HTML 元素
```css
[attr$=value] { 屬性值 }
```
---
## 語法
選取有屬性 `attr` ，且屬性值<font color=red>包含</font> `value` 的 HTML 元素
```css
[attr*=value] { 屬性值 }
```
---
範例
<iframe height="600" style="width: 100%;" scrolling="no" title="Attribute selector" src="https://codepen.io/alpha34727/embed/oNQgXyJ?default-tab=css%2Cresult&editable=true" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/alpha34727/pen/oNQgXyJ">
Attribute selector</a> by Alpha (<a href="https://codepen.io/alpha34727">@alpha34727</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>
---
### 通用選擇器 (Universal selector)
指定所有 HTML 元素
---
## 語法
```css
* { 屬性值 }
```
---
範例：選取所有 HTML 元素，將其文字顏色改為<font style="color: red;">紅色</font>
<iframe height="600" style="width: 100%;" scrolling="no" title="Universal selector" src="https://codepen.io/alpha34727/embed/vYQEOOV?default-tab=css%2Cresult&editable=true" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/alpha34727/pen/vYQEOOV">
Universal selector</a> by Alpha (<a href="https://codepen.io/alpha34727">@alpha34727</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>
---
## 分組選擇器
---
## 分組選擇器 包含以下選擇器
* 選擇器列表 (Selector list)
---
### 選擇器列表 (Selector list)
使用 逗點(`,`) 來同時使用多種選擇器
---
<iframe height="600" style="width: 100%;" scrolling="no" title="Untitled" src="https://codepen.io/alpha34727/embed/XWxzGmx?default-tab=css%2Cresult&editable=true" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/alpha34727/pen/XWxzGmx">
Untitled</a> by Alpha (<a href="https://codepen.io/alpha34727">@alpha34727</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>
---
## 組合選擇器
---
## 分組選擇器 包含以下選擇器
* 後代選擇器 (Descendant combinator)
* 子代選擇器 (Child combinator)
* 一般兄弟選擇器 (General sibling combinator)
* 相鄰兄弟選擇器 (Adjacent sibling combinator)
---
#### 後代選擇器 (Descendant combinator)
選擇某個 Selector 下的 Selector
---
語法：選擇 selector1 下的 selector2
```css
selector1 selector2 { 屬性值 }
```
---
範例
<iframe height="600" style="width: 100%;" scrolling="no" title="Descendant combinator" src="https://codepen.io/alpha34727/embed/ZEmYbGo?default-tab=css%2Cresult&editable=true" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/alpha34727/pen/ZEmYbGo">
Descendant combinator</a> by Alpha (<a href="https://codepen.io/alpha34727">@alpha34727</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>
---
## 子代選擇器 (Child combinator)
和後代選擇器 (Descendant combinator) 類似，選擇某個 Selector1 下的 Selector2，但限定 Selector2 直接在 Selector1 下面。
---
語法：選擇直接在 selector1 下的 selector2
```css
selector1 > selector2 { 屬性值 }
```
---
範例
<iframe height="600" style="width: 100%;" scrolling="no" title="Child combinator" src="https://codepen.io/alpha34727/embed/JjeoYXV?default-tab=css%2Cresult&editable=true" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/alpha34727/pen/JjeoYXV">
Child combinator</a> by Alpha (<a href="https://codepen.io/alpha34727">@alpha34727</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>
---
### 一般兄弟選擇器 (General sibling combinator)
選取與 selector1 同層元素中，selector1 之後出現的 selector2
---
語法
```css
selector1 ~ selector2 { 屬性值 }
```
---
範例
<iframe height="600" style="width: 100%;" scrolling="no" title="Untitled" src="https://codepen.io/alpha34727/embed/oNQgjeg?default-tab=css%2Cresult&editable=true" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/alpha34727/pen/oNQgjeg">
Untitled</a> by Alpha (<a href="https://codepen.io/alpha34727">@alpha34727</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>
---
### 相鄰兄弟選擇器 (Adjacent sibling combinator)
和 一般兄弟選擇器 (General sibling combinator) 類似，但只會選出一個 HTML 元素
---
語法
```css
selector1 + selector2 { 屬性值 }
```
---
範例
<iframe height="600" style="width: 100%;" scrolling="no" title="Adjacent sibling combinator" src="https://codepen.io/alpha34727/embed/xxQbwLo?default-tab=css%2Cresult&editable=true" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/alpha34727/pen/xxQbwLo">
Adjacent sibling combinator</a> by Alpha (<a href="https://codepen.io/alpha34727">@alpha34727</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>
---
## 偽選擇器
選定處於特殊狀態或特定位置的 HTML 元素，如：游標懸停、取得焦點......等。
---
## 偽選擇器 包含以下選擇器
* 偽類 (Pseudo classes)
* 偽元素 (Pseudo elements)
---
## 偽類 (Pseudo classes)
---
## 常見的偽類
* `:hover`
* `:active`
* `:focus`
* `:visited`
* `:first-child`
* `:last-child`
* `:nth-child(n)`
---
## `:hover`
游標懸停在 HTML 元素上
---
#### `:hover` 範例：當游標懸停在圖片上時，圖片放大
<iframe height="600" style="width: 100%;" scrolling="no" title=":hover" src="https://codepen.io/alpha34727/embed/oNQgWPJ?default-tab=css%2Cresult&editable=true" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/alpha34727/pen/oNQgWPJ">
:hover</a> by Alpha (<a href="https://codepen.io/alpha34727">@alpha34727</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>
---
## `:active`
元素被點擊，例如：按鈕按下
---
#### `:active` 範例：當按鈕按下時，改變顏色
<iframe height="600" style="width: 100%;" scrolling="no" title=":active" src="https://codepen.io/alpha34727/embed/zYMxwej?default-tab=css%2Cresult&editable=true" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/alpha34727/pen/zYMxwej">
:active</a> by Alpha (<a href="https://codepen.io/alpha34727">@alpha34727</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>
---
## `:focus`
元素取得焦點，例如：輸入表單被選中
---
#### `:focus` 範例：當輸入表單被選中，輸入表單改變顏色
<iframe height="600" style="width: 100%;" scrolling="no" title=":focus" src="https://codepen.io/alpha34727/embed/GRwgEKJ?default-tab=css%2Cresult&editable=true" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/alpha34727/pen/GRwgEKJ">
:focus</a> by Alpha (<a href="https://codepen.io/alpha34727">@alpha34727</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>
---
## `:visited`
使用者曾選取過連結
---
#### `:visited` 範例：將所有已選取過的連結顏色改為灰色
HTML：
```htmlembedded=
<p>一些連結：</p>
<ul>
<li><a href="https://www.google.com" target="_blank">Google</a></li>
<li><a href="https://web.dcsh.tp.edu.tw" target="_blank">大直高中</a></li>
<li><a href="https://themoodyoldman.github.io/" target="_blank">大直高中資訊社</a></li>
<li><a href="https://bit.ly/3H0xM3y" target="_blank">不要點我</a></li>
</ul>
```
---
CSS：
```css=
a:visited {
color: gray;
}
```
---
<style>
a:visited {
color: gray;
}
</style>
<p>一些連結：</p>
<ul>
<li><a href="https://www.google.com" target="_blank">Google</a></li>
<li><a href="https://web.dcsh.tp.edu.tw" target="_blank">大直高中</a></li>
<li><a href="https://themoodyoldman.github.io/" target="_blank">大直高中資訊社</a></li>
<li><a href="https://bit.ly/3H0xM3y" target="_blank">不要點我</a></li>
</ul>
---
## `:first-child`
父元素下第一個子元素
---
#### `:first-child` 範例：
<iframe height="600" style="width: 100%;" scrolling="no" title=":first-child" src="https://codepen.io/alpha34727/embed/MWzYoOq?default-tab=css%2Cresult&editable=true" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/alpha34727/pen/MWzYoOq">
:first-child</a> by Alpha (<a href="https://codepen.io/alpha34727">@alpha34727</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>
---
## `:last-child`
父元素下最後一個子元素
---
#### `:last-child` 範例：
<iframe height="600" style="width: 100%;" scrolling="no" title=":last-child" src="https://codepen.io/alpha34727/embed/LYXELrE?default-tab=css%2Cresult&editable=true" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/alpha34727/pen/LYXELrE">
:last-child</a> by Alpha (<a href="https://codepen.io/alpha34727">@alpha34727</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>
---
## `:nth-child(n)`
父元素下最後一個子元素
---
#### `:nth-child(n)` 範例：
n 可以是整數(`1`、`2`、`3`...)
<iframe height="300" style="width: 100%;" scrolling="no" title=":nth-child(n)" src="https://codepen.io/alpha34727/embed/rNQawKP?default-tab=css%2Cresult&editable=true" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/alpha34727/pen/rNQawKP">
:nth-child(n)</a> by Alpha (<a href="https://codepen.io/alpha34727">@alpha34727</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>
---
#### `:nth-child(n)` 範例：
n 可以是表達式(`2n`、`3n-5`......)
<iframe height="300" style="width: 100%;" scrolling="no" title=":nth-child(n) 3n+2" src="https://codepen.io/alpha34727/embed/XWyJgGL?default-tab=css%2Cresult&editable=true" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/alpha34727/pen/XWyJgGL">
:nth-child(n) 3n+2</a> by Alpha (<a href="https://codepen.io/alpha34727">@alpha34727</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>
---
#### `:nth-child(n)` 範例：
n 可以是關鍵字(`odd`、`even`)
<iframe height="300" style="width: 100%;" scrolling="no" title=":nth-child(n) odd even" src="https://codepen.io/alpha34727/embed/wvQBeNp?default-tab=css%2Cresult&editable=true" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/alpha34727/pen/wvQBeNp">
:nth-child(n) odd even</a> by Alpha (<a href="https://codepen.io/alpha34727">@alpha34727</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>
---
### 偽元素 (Pseudo elements)
偽元素不是真正的 HTML 元素，而是由 CSS 所產生的虛擬元素。
---
### 偽元素 (Pseudo elements)
偽元素可以在特定位置插入或修改 HTML 內容，而不需要修改實際的 HTML 結構。
---
#### 常用的偽元素：
* `::before`：在元素之前加入內容
* `::after`：在元素之後加入內容
* `::first-letter`：選中元素的第一個字元
* `::first-line`：選中元素的第一個行字
* `::selection`：被反白的文字
---
## `::before`
`::before` 可在元素之前加入內容
---
## `::before`
⚠️ 需要有 `content` 才可作用 ⚠️
---
範例
<iframe height="600" style="width: 100%;" scrolling="no" title="::before" src="https://codepen.io/alpha34727/embed/oNQgejz?default-tab=css%2Cresult&editable=true" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/alpha34727/pen/oNQgejz">
::before</a> by Alpha (<a href="https://codepen.io/alpha34727">@alpha34727</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>
---
## `::after`
`::after` 可在元素之後加入內容
---
## `::after`
⚠️ 需要有 `content` 才可作用 ⚠️
---
範例
<iframe height="600" style="width: 100%;" scrolling="no" title="::after" src="https://codepen.io/alpha34727/embed/PoxwKPE?default-tab=css%2Cresult&editable=true" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/alpha34727/pen/PoxwKPE">
::after</a> by Alpha (<a href="https://codepen.io/alpha34727">@alpha34727</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>
---
## `::first-letter`
選中元素的第一個字元
---
範例
<iframe height="600" style="width: 100%;" scrolling="no" title="Untitled" src="https://codepen.io/alpha34727/embed/bGQNrEj?default-tab=css%2Cresult&editable=true" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/alpha34727/pen/bGQNrEj">
Untitled</a> by Alpha (<a href="https://codepen.io/alpha34727">@alpha34727</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>
---
## `::first-line`
選中元素的第一個行字
---
範例
<iframe height="600" style="width: 100%;" scrolling="no" title="::first-line" src="https://codepen.io/alpha34727/embed/WNYbEwa?default-tab=css%2Cresult&editable=true" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/alpha34727/pen/WNYbEwa">
::first-line</a> by Alpha (<a href="https://codepen.io/alpha34727">@alpha34727</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>
---
## `::selection`
選取被反白的文字
---
範例
<iframe height="600" style="width: 100%;" scrolling="no" title="::selection" src="https://codepen.io/alpha34727/embed/bGQNrgx?default-tab=css%2Cresult&editable=true" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/alpha34727/pen/bGQNrgx">
::selection</a> by Alpha (<a href="https://codepen.io/alpha34727">@alpha34727</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>
{"metaMigratedAt":"2023-06-18T06:55:52.354Z","metaMigratedFrom":"YAML","title":"CSS 選擇器","breaks":true,"contributors":"[{\"id\":\"b1b336d5-b75d-4c19-b4f6-fccd69a2a9f2\",\"add\":17699,\"del\":1865}]"}