第 1章 概述 1
1.1 為什麼CSS選擇器很強 1
1.2 CSS選擇器世界的一些基本概念 1
1.2.1 選擇器、選擇符、僞類和僞元素 2
1.2.2 CSS選擇器的作用域 3
1.2.3 CSS選擇器的命名空間 4
1.3 無效CSS選擇器特性與實際應用 5
第 2章 CSS選擇器的優先級 7
2.1 CSS優先級規則概覽 7
2.2 深入CSS選擇器優先級 8
2.2.1 CSS選擇器優先級的計算規則 8
2.2.2 256個選擇器的越級現象 11
2.3 為什麼按鈕:hover變色瞭 12
第3章 CSS選擇器的命名 13
3.1 CSS選擇器是否區分大小寫 13
3.2 CSS選擇器命名的閤法性 14
3.3 CSS選擇器的命名是一個哲學問題 17
3.3.1 長命名還是短命名 18
3.3.2 單命名還是組閤命名 18
3.3.3 麵嚮屬性的命名和麵嚮語義的命名 20
3.3.4 我是如何取名的 21
3.4 CSS選擇器設計的最佳實踐 24
3.4.1 不要使用ID選擇器 25
3.4.2 不要嵌套選擇器 25
3.4.3 不要歧視麵嚮屬性的命名 28
3.4.4 正確使用狀態類名 30
3.4.5 最佳實踐匯總 33
第4章 精通CSS選擇符 37
4.1 後代選擇符空格( ) 37
4.1.1 對CSS後代選擇符可能錯誤的認識 37
4.1.2 對JavaScript中後代選擇符可能錯誤的認識 39
4.2 子選擇符箭頭(>) 41
4.2.1 子選擇符和後代選擇符的區彆 41
4.2.2 適閤使用子選擇符的場景 42
4.3 相鄰兄弟選擇符加號(+) 43
4.3.1 相鄰兄弟選擇符的相關細節 44
4.3.2 實現類似:first-child的效果 45
4.3.3 眾多高級選擇器技術的核心 47
4.4 隨後兄弟選擇符彎彎(~) 48
4.4.1 和相鄰兄弟選擇符區彆 48
4.4.2 為什麼沒有前麵兄弟選擇符 49
4.4.3 如何實現前麵兄弟選擇符的效果 49
4.5 快速瞭解列選擇符雙管道(||) 52
第5章 元素選擇器 55
5.1 元素選擇器的級聯語法 55
5.2 標簽選擇器二三事 57
5.2.1 標簽選擇器混閤其他選擇器的優化 57
5.2.2 標簽選擇器與自定義元素 57
5.3 特殊的標簽選擇器:通配選擇器 58
第6章 屬性選擇器 59
6.1 ID選擇器和類選擇器 59
6.2 屬性值直接匹配選擇器 60
6.2.1 詳細瞭解4種選擇器 61
6.2.2 AMCSS開發模式簡介 66
6.3 屬性值正則匹配選擇器 67
6.3.1 詳細瞭解3種選擇器 68
6.3.2 CSS屬性選擇器搜索過濾技術 71
6.4 忽略屬性值大小寫的正則匹配運算符 72
第7章 用戶行為僞類 75
7.1 手型經過僞類:hover 75
7.1.1 體驗優化與:hover延時 75
7.1.2 非子元素的:hover顯示 76
7.1.3 純:hover顯示浮層的體驗問題 78
7.2 激活狀態僞類:active 79
7.2.1 :active僞類概述 79
7.2.2 按鈕的通用:active樣式技巧 80
7.2.3 :active僞類與CSS數據上報 82
7.3 焦點僞類:focus 82
7.3.1 :focus僞類匹配機製 83
7.3.2 :focus僞類與outline 85
7.3.3 CSS :focus僞類與鍵盤無障礙訪問 86
7.4 整體焦點僞類:focus-within 89
7.4.1 :focus-within和:focus僞類的區彆 89
7.4.2 :focus-within實現無障礙訪問的下拉列錶 89
7.5 鍵盤焦點僞類:focus-visible 91
第8章 URL定位僞類 95
8.1 鏈接曆史僞類:link和:visited 95
8.1.1 深入理解:link 95
8.1.2 怪癖最多的CSS僞類:visited 97
8.2 超鏈接僞類:any-link 100
8.3 目標僞類:target 101
8.3.1 :target與錨點 102
8.3.2 :target交互布局技術簡介 104
8.4 目標容器僞類:target-within 108
第9章 輸入僞類 109
9.1 輸入控件狀態 109
9.1.1 可用狀態與禁用狀態僞類:enabled和:disabled 109
9.1.2 讀寫特性僞類:read-only和:read-write 113
9.1.3 占位符顯示僞類:placeholder-shown 115
9.1.4 默認選項僞類:default 118
9.2 輸入值狀態 120
9.2.1 選中選項僞類:checked 121
9.2.2 不確定值僞類:indeterminate 133
9.3 輸入值驗證 136
9.3.1 有效性驗證僞類:valid和:invalid 136
9.3.2 範圍驗證僞類:in-range和:out-of-range 140
9.3.3 可選性僞類:required和:optional 142
9.3.4 用戶交互僞類:user-invalid和空值僞類:blank 146
第 10章 樹結構僞類 147
10.1 :root僞類 147
10.1.1 :root僞類和元素 147
10.1.2 :root僞類的應用場景 148
10.2 :empty僞類 150
10.2.1 對:empty僞類可能的誤解 152
10.2.2 超實用超高頻使用的:empty僞類 154
10.3 子索引僞類 156
10.3.1 :first-child僞類和:last-child僞類 156
10.3.2 :only-child僞類 158
10.3.3 :nth-child()僞類和:nth-last-child()僞類 160
10.4 匹配類型的子索引僞類 166
10.4.1 :first-of-type僞類和:last-of-type僞類 166
10.4.2 :only-of-type僞類 167
10.4.3 :nth-of-type()僞類和:nth-last-of-type()僞類 168
第 11章 邏輯組閤僞類 173
11.1 否定僞類:not() 173
11.2 瞭解任意匹配僞類:is() 177
11.2.1 :is()僞類與:matches()僞類及:any()僞類之間的關係 177
11.2.2 :is()僞類的語法與作用 178
11.3 瞭解任意匹配僞類:where() 179
11.4 瞭解關聯僞類:has() 179
第 12章 其他僞類選擇器 181
12.1 與作用域相關的僞類 181
12.1.1 參考元素僞類:scope 181
12.1.2 Shadow樹根元素僞類:host 183
12.1.3 Shadow樹根元素匹配僞類:host() 184
12.1.4 Shadow樹根元素上下文匹配僞類:host-context() 185
12.2 與全屏相關的僞類:fullscreen 187
12.3 瞭解語言相關僞類 188
12.3.1 方嚮僞類:dir() 189
12.3.2 語言僞類:lang() 190
12.4 瞭解資源狀態僞類 191
· · · · · · (
收起)