Day22-css 選擇器-2: 狀態選擇器 pseudo class & element

2023 iThome 鐵人賽

DAY 22

Modern Web

Angular，啟動。系列第 22 篇

15th鐵人賽

Raven

2023-10-07 16:56:37

231 瀏覽

分享至

CSS 選擇器

CSS 選擇器 - 術語表 | MDN
CSS Pseudo-classes

	名稱	範例
(A) 基本選擇器	(1) 元素選擇器	`elementname`
(2) Class 選擇器	`.classname`
(3) ID 選擇器	`#idname`
(4) 通用選擇器	`* ns	* *
(5) 屬性選擇器	`[attr=value]`
(B) 虛擬類別	(1) 狀態選擇器	`:hover` `:disabled`
(B) 虛擬元素		`::before` `::after`
(C) 複合選擇器	(1) 鄰接同層選擇器	`A + B`
(2) 通用同層選擇器	`A ~ B`
(3) 直屬選擇器	`A > B`
(4) 後代選擇器	`A B`

B1 虛擬類別（偽類） pseudo-class

: 選擇 Html 元素的某個狀態

如果中文有看沒有懂的話，用英文可能比較好理解

發現整理的有點雜亂，有空再改(2024了，作者還是沒改)

常見

選擇器	說明	範例
`:hover`	當滑鼠指針懸停在元素上時
`:link`	未訪問過的連結
`:visited`	訪問過的連結
`:active`	當元素被點擊時
`:focus`	焦點在某個元素時
`:not(selector)`	排除『特定類型、條件』的元素	`<ul><li></li><li class="cat"></li><li></li></ul>` => `li:not(.cat){ /設定css/ }`

常用於表單Input、Checkbox、RadioButton...

選擇器	說明	範例
`:checked`	所有『已選取』的元素	`input[type="checkbox"]:checked`
`:disabled`	所有『禁用』的元素
`:enabled`	所有『無禁用』的元素
`:valid`	所有『通過驗證』的元素	常用於表單的欄位驗證
`:invalid`	所有『無通過驗證』的元素	常用於表單的欄位驗證
`:empty`	所有『無任何內容、子項目』的元素	`p:empty` => 選擇所有沒有內容的 `<p>`
`:read-only`	所有屬性為『唯讀』的元素
`:read-write`	所有屬性為『非唯讀』元素
`:required`	所有屬性為『必填』的元素
`:optional`	所有屬性為『非必填』的元素
`:in-range`	在指定『範圍內』的元素	常與 `:valid` `:invalid` 一起使用。`<input type="number" min="1" max="100">` => 若輸入 87 的值 => `:in-range` 會運作
`:out-of-range`	在指定『範圍外』的元	同上範例 => 若輸入 999 的值 => `:out-of-range` 會運作

基於位置、類型

...紅鯉魚與綠鯉魚與驢

選擇器	說明	範例
p`:first-child`	『第一個』子元素為 `<p>`
p`:last-child`	『(倒數)最後一個』子元素為 `<p>`
p`:first-of-type`	『第一個』 `<p>` 元素
p`:last-of-type`	『(倒數)最後一個』 `<p>` 元素

`:nth-child(n)`	父元素中的『第n個』子元素	基於位置
`:nth-last-child(n)`	父元素中的『(倒數)第n個』子元素	基於位置
`:nth-of-type(n)`	父元素中的『第n個特定類型』子元素	基於類型
`:nth-last-of-type(n)`	父元素中的『(倒數)第n個特定類型』子元素	基於類型

`:only-child`	父元素中『唯一的』子元素時	通常與其他選擇器一起使用。`<div><p></p></div>`
`:only-of-type`	父元素中『擁有某一個特定類型』子元素	通常與其他選擇器一起使用。`<div><p></p><p></p></div>` => 擁有兩組同一特定類型是可行的

其他

選擇器	說明	範例
`:root`	選擇 document(文檔) 的根元素	在HTML中，通常是指 `<html>` 元素
`:target`	指向文件中的某個元素	（通常是`#`+`anchor identifier`） => `<h1 id="s1">Section 1</h1>` => 並設置一個 LINK `<a href="#s1">Go</a>` => 點了就會跳到 `h1` 那邊
`:lang(language)`	選擇特定『語言』元素	根據 ISO 639-1 的編碼 => `<p lang="fr"></p>`

B1 虛擬元素（偽元素） pseudo-class

可以參考寫的滿清楚簡單的範例來認識偽元素：
什麼是::before和::after？CSS偽元素怎麼用[實作範例] - 薯薯推薦

簡陋懶人版本：

<div class="style_1">哈囉！</div>

原始 div

/* content為必要的屬性設定(即使沒有要變動文字內容) */
//加入於<div>的前面
.style_1::before{
  content: "AAA";
  color: red;
}
//加入於<div>的後面
.style_1::after{
  content: "BBBB"; 
  color: blue;
}

使用 ::before 和 ::after 的 div

::

選擇器	狀態說明	範例
`::before`	在元素的『前面』插入虛擬元素
`::after`	在元素的『後面』插入虛擬元素
`::first-letter`	選擇元素的第一個字母
`::first-line`	選擇元素(段落中)的第一行文本
`::marker`	用於樣式化列表項目 `<li>`	`ul{list-style-type: none;} li::marker {content: "🔹";color: #e74c3c;}`
`::selection`	選擇『使用者滑鼠選擇的部分』