CSS選擇器世界（第2版）

第 1章 概述 1
1.1 為什么CSS選擇器很強(qiáng) 1
1.2 CSS選擇器世界的一些基本概念 1
1.2.1 選擇器、選擇符、偽類(lèi)和偽元素 2
1.2.2 CSS選擇器的作用域 3
1.2.3 CSS選擇器的命名空間 4
1.3 無(wú)效CSS選擇器的特性與實(shí)際應(yīng)用 5
第 2章 CSS聲明的優(yōu)先級(jí) 8
2.1 繼承與級(jí)聯(lián) 9
2.1.1 優(yōu)先級(jí)的底層——繼承 9
2.1.2 優(yōu)先級(jí)的中樞——級(jí)聯(lián) 10
2.2 詳解@layer規(guī)則 11
2.2.1 @layer規(guī)則解決的問(wèn)題 11
2.2.2 掌握@layer規(guī)則的語(yǔ)法 13
2.2.3 使整個(gè)CSS變成@layer 15
2.2.4 @layer規(guī)則的嵌套 16
2.3 叛逆的!important 19
2.3.1 !important與層級(jí)跨越 19
2.3.2 !important的逆向越級(jí) 19
2.4 CSS選擇器的優(yōu)先級(jí) 20
2.4.1 同等級(jí)CSS優(yōu)先級(jí)規(guī)則概覽 20
2.4.2 CSS選擇器優(yōu)先級(jí)的計(jì)算規(guī)則21
2.4.3 256個(gè)選擇器的越級(jí)現(xiàn)象 24
2.4.4 為什么按鈕:hover變色了 25
第3章 CSS選擇器的命名 27
3.1 CSS選擇器是否區(qū)分大小寫(xiě) 27
3.2 CSS選擇器命名的合法性 28
規(guī)范與更多字符的合法性 30
3.3 CSS選擇器的命名是一個(gè)哲學(xué)問(wèn)題 31
3.3.1 長(zhǎng)命名還是短命名 32
3.3.2 單命名還是組合命名 32
3.3.3 面向?qū)傩缘拿兔嫦蛘Z(yǔ)義的命名 34
3.3.4 我是如何命名的 36
3.4 CSS選擇器設(shè)計(jì)的最佳實(shí)踐 39
3.4.1 不要使用ID選擇器 39
3.4.2 不要嵌套選擇器 39
3.4.3 不要歧視面向?qū)傩缘拿?42
3.4.4 正確使用狀態(tài)類(lèi)名 44
3.4.5 工具帶來(lái)的變化 48
3.4.6 最佳實(shí)踐匯總 48
第4章 入門(mén)必學(xué)的選擇器 52
4.1 標(biāo)簽選擇器 52
4.1.1 標(biāo)簽選擇器二三事 52
4.1.2 特殊的標(biāo)簽選擇器：通配選擇器55
4.2 類(lèi)選擇器 55
4.2.1 類(lèi)選擇器脫穎而出的原因 55
4.2.2 類(lèi)選擇器的其他小知識(shí) 57
4.3 ID選擇器 58
第5章 精通CSS選擇符 60
5.1 后代選擇符——空格（ ） 60
5.1.1 對(duì)CSS后代選擇符可能的錯(cuò)誤認(rèn)識(shí) 61
5.1.2 對(duì)JavaScript中后代選擇符可能的錯(cuò)誤認(rèn)識(shí) 63
5.1.3 :scope 偽類(lèi) 64
5.2 子選擇符——箭頭（>） 66
5.2.1 子選擇符和后代選擇符的區(qū)別 66
5.2.2 適合使用子選擇符的場(chǎng)景 67
5.3 相鄰兄弟選擇符——加號(hào)（ ） 68
5.3.1 相鄰兄弟選擇符的相關(guān)細(xì)節(jié) 69
5.3.2 實(shí)現(xiàn)類(lèi)似:first-child偽類(lèi)的效果 70
5.3.3 眾多高級(jí)選擇器技術(shù)的核心 72
5.4 隨后兄弟選擇符——波浪線（~） 73
5.4.1 隨后兄弟選擇符和相鄰兄弟選擇符的區(qū)別 73
5.4.2 如何實(shí)現(xiàn)前面兄弟選擇符的效果 74
5.5 快速了解列選擇符——雙管道（||） 77
第6章 被低估的屬性選擇器 80
6.1 屬性值匹配選擇器逐漸興起 80
6.2 屬性值直接匹配選擇器 81
6.2.1 詳細(xì)了解4種選擇器 81
6.2.2 AMCSS開(kāi)發(fā)模式簡(jiǎn)介 87
6.3 屬性值正則匹配選擇器 88
6.3.1 詳細(xì)了解3種選擇器 88
6.3.2 CSS屬性選擇器搜索過(guò)濾技術(shù) 91
6.4 忽略屬性值大小寫(xiě)的正則匹配運(yùn)算符 92
第7章 常見(jiàn)交互行為的實(shí)現(xiàn) 94
7.1 :hover偽類(lèi)與懸停交互開(kāi)發(fā) 94
7.1.1 體驗(yàn)優(yōu)化與:hover延時(shí) 95
7.1.2 非子元素的:hover顯示 96
7.1.3 純:hover顯示浮層的體驗(yàn)問(wèn)題 98
7.2 使用:active偽類(lèi)實(shí)現(xiàn)點(diǎn)擊反饋 99
7.2.1 :active偽類(lèi)概述 99
7.2.2 按鈕的通用:active樣式技巧 100
7.2.3 :active偽類(lèi)與CSS數(shù)據(jù)上報(bào) 102
7.3 聚焦行為偽類(lèi):focus與用戶體驗(yàn) 103
7.3.1 :focus偽類(lèi)匹配機(jī)制 103
7.3.2 :focus偽類(lèi)與outline輪廓 105
7.3.3 CSS:focus偽類(lèi)與鍵盤(pán)無(wú)障礙訪問(wèn) 106
7.4 非常實(shí)用的整體焦點(diǎn)偽類(lèi):focus-within 109
7.4.1 :focus-within偽類(lèi)和:focus偽類(lèi)的區(qū)別 109
7.4.2 :focus-within偽類(lèi)實(shí)現(xiàn)無(wú)障礙訪問(wèn)的下拉列表 110
7.5 鍵盤(pán)焦點(diǎn)偽類(lèi):focus-visible 112
:focus-visible偽類(lèi)的作用及背景變化 112
第8章 通過(guò)樹(shù)結(jié)構(gòu)偽類(lèi)匹配元素 115
8.1 :root偽類(lèi) 115
8.1.1 :root偽類(lèi)匹配的究竟是什么 116
8.1.2 :root偽類(lèi)的應(yīng)用場(chǎng)景 117
8.2 要多使用:empty偽類(lèi) 118
8.2.1 對(duì):empty偽類(lèi)可能存在的誤解 120
8.2.2 超實(shí)用超高頻使用的:empty偽類(lèi) 122
8.3 比較實(shí)用的子索引偽類(lèi) 124
8.3.1 :first-child偽類(lèi)和:last-child偽類(lèi) 124
8.3.2 給力的:only-child偽類(lèi) 126
8.3.3 :nth-child()偽類(lèi)和:nth-last-child()偽類(lèi) 128
8.4 匹配類(lèi)型的子索引偽類(lèi) 136
8.4.1 :first-of-type偽類(lèi)和:last-of-type偽類(lèi) 136
8.4.2 :only-of-type偽類(lèi) 137
8.4.3 :nth-of-type()偽類(lèi)和:nth-last-of-type()偽類(lèi) 138
第9章 不容小覷的邏輯組合偽類(lèi) 142
9.1 務(wù)必掌握的否定偽類(lèi):not() 142
告別重置，全部交給:not()偽類(lèi) 143
9.2 不要小看任意匹配偽類(lèi):is() 147
9.2.1 :is()偽類(lèi)與:matches()偽類(lèi)及:any()偽類(lèi)之間的關(guān)系 147
9.2.2 :is()偽類(lèi)的語(yǔ)法和兩大作用 147
9.2.3 :is()偽類(lèi)在 Vue 等框架中的妙用 150
9.3 實(shí)用的優(yōu)先級(jí)調(diào)整偽類(lèi):where() 152
9.4 姍姍來(lái)遲的關(guān)聯(lián)偽類(lèi):has() 153
第 10章 鏈接與錨點(diǎn)開(kāi)發(fā)相關(guān)的偽類(lèi) 156
10.1 鏈接歷史偽類(lèi):link和:visited 156
10.1.1 深入理解:link偽類(lèi) 156
10.1.2 怪癖最多的CSS偽類(lèi):visited 158
10.2 值得關(guān)注的超鏈接偽類(lèi):any-link 161
:any-link偽類(lèi)相比于:link偽類(lèi)的優(yōu)點(diǎn). 162
10.3 實(shí)用卻很少使用的目標(biāo)偽類(lèi):target 163
10.3.1 :target偽類(lèi)與錨點(diǎn) 164
10.3.2 :target偽類(lèi)交互布局技術(shù)簡(jiǎn)介 166
10.4 了解目標(biāo)容器偽類(lèi):target-within 170
10.5 了解鏈接匹配偽類(lèi):local-link 171
第 11章 表單開(kāi)發(fā)相關(guān)的偽類(lèi) 172
11.1 輸入控件狀態(tài) 172
11.1.1 可用狀態(tài)偽類(lèi):enabled與禁用狀態(tài)偽類(lèi):disabled 172
11.1.2 讀寫(xiě)特性偽類(lèi):read-only和:read-write 176
11.1.3 占位符顯示偽類(lèi):placeholder-shown 177
11.1.4 使用:autofill偽類(lèi)自定義自動(dòng)填充樣式 180
11.1.5 默認(rèn)選項(xiàng):default偽類(lèi) 181
11.2 輸入值狀態(tài) 184
11.2.1 實(shí)用的選中選項(xiàng)偽類(lèi):checked 184
11.2.2 有用的不確定值偽類(lèi):indeterminate 196
11.3 輸入值驗(yàn)證 199
11.3.1 掌握有效性驗(yàn)證偽類(lèi):valid和:invalid 199
11.3.2 熟悉范圍驗(yàn)證偽類(lèi):in-range和:out-of-range 203
11.3.3 熟悉可選性偽類(lèi):required和:optional 205
11.3.4 了解用戶交互偽類(lèi):user-valid和:user-invalid 210
11.3.5 簡(jiǎn)單了解空值偽類(lèi):blank 211
11.4 表單元素專(zhuān)用偽元素 211
11.4.1 使用::placeholder偽元素改變占位符的樣式 212
11.4.2 使用::file-selector-button偽元素匹配文件選擇輸入框的按鈕 213
第 12章 Web Components開(kāi)發(fā)中的選擇器 215
12.1 使用:defined偽類(lèi)判斷組件是否初始化 215
12.1.1 普通元素的:defined適配規(guī)則 217
12.1.2 Safari不支持內(nèi)置自定義元素的處理 219
12.2 使用:host偽類(lèi)匹配Shadow樹(shù)根元素 219
12.3 使用偽類(lèi):host()匹配Shadow樹(shù)根元素 221
12.4 Shadow樹(shù)根元素上下文匹配偽類(lèi):host-context() 222
12.5 使用::part偽元素穿透Shadow DOM元素 223
::part偽元素對(duì)元素也是有效的 226
第 13章 音視頻開(kāi)發(fā)中的選擇器 228
13.1 音視頻元素各種狀態(tài)的匹配 228
13.1.1 使用:playing偽類(lèi)、:paused 偽類(lèi)和:seeking偽類(lèi)匹配播放狀態(tài) 228
13.1.2 加載狀態(tài)偽類(lèi):buffering和:stalled 230
13.1.3 聲音控制偽類(lèi):muted和:volume-locked 230
13.2 視頻字幕樣式的控制 230
13.2.1 使用::cue偽元素控制字幕的樣式 231
13.2.3 了解:current、:past 和:future這些時(shí)間維度的偽類(lèi) 234
第 14章 語(yǔ)言和文字相關(guān)的選擇器 236
14.1 了解語(yǔ)言相關(guān)的偽類(lèi) 236
14.1.1 方向偽類(lèi):dir() 236
14.1.2 語(yǔ)言偽類(lèi):lang() 237
14.2 全新的文字相關(guān)的偽元素 239
14.2.1 ::mark偽元素簡(jiǎn)介 239
14.2.2 使用::target-text偽元素高亮錨定的文字 241
14.2.3 使用::spelling-error偽元素和
::grammar-error偽元素高亮拼寫(xiě)和語(yǔ)法錯(cuò)誤 242
第 15章 元素特殊顯示狀態(tài)匹配偽類(lèi) 244
15.1 了解模態(tài)層匹配偽類(lèi):modal 244
15.2 了解全屏相關(guān)的偽類(lèi):fullscreen 245
15.3 了解畫(huà)中畫(huà)偽類(lèi):picture-in-picture 247
15.4 使用::backdrop偽元素改變底部蒙層 248