CSS選擇器世界

目　錄
第 1章 概述 1
1．1 為什么CSS選擇器很強(qiáng) 1
1．2 CSS選擇器世界的一些基本概念 1
1．2．1 選擇器、選擇符、偽類和偽元素 2
1．2．2 CSS選擇器的作用域 3
1．2．3 CSS選擇器的命名空間 4
1．3 無效CSS選擇器特性與實(shí)際應(yīng)用 5
第 2章 CSS選擇器的優(yōu)先級(jí) 7
2．1 CSS優(yōu)先級(jí)規(guī)則概覽 7
2．2 深入CSS選擇器優(yōu)先級(jí) 8
2．2．1 CSS選擇器優(yōu)先級(jí)的計(jì)算規(guī)則 8
2．2．2 256個(gè)選擇器的越級(jí)現(xiàn)象 11
2．3 為什么按鈕：hover變色了 12
第3章 CSS選擇器的命名 13
3．1 CSS選擇器是否區(qū)分大小寫 13
3．2 CSS選擇器命名的合法性 14
3．3 CSS選擇器的命名是一個(gè)哲學(xué)問題 17
3．3．1 長(zhǎng)命名還是短命名 18
3．3．2 單命名還是組合命名 18
3．3．3 面向?qū)傩缘拿兔嫦蛘Z義的命名 20
3．3．4 我是如何取名的 21
3．4 CSS選擇器設(shè)計(jì)的最佳實(shí)踐 24
3．4．1 不要使用ID選擇器 25
3．4．2 不要嵌套選擇器 25
3．4．3 不要歧視面向?qū)傩缘拿?28
3．4．4 正確使用狀態(tài)類名 30
3．4．5 最佳實(shí)踐匯總 33
第4章 精通CSS選擇符 37
4．1 后代選擇符空格（ ） 37
4．1．1 對(duì)CSS后代選擇符可能錯(cuò)誤的認(rèn)識(shí) 37
4．1．2 對(duì)JavaScript中后代選擇符可能錯(cuò)誤的認(rèn)識(shí) 39
4．2 子選擇符箭頭（>） 41
4．2．1 子選擇符和后代選擇符的區(qū)別 41
4．2．2 適合使用子選擇符的場(chǎng)景 42
4．3 相鄰兄弟選擇符加號(hào)（+） 43
4．3．1 相鄰兄弟選擇符的相關(guān)細(xì)節(jié) 44
4．3．2 實(shí)現(xiàn)類似：first-child的效果 45
4．3．3 眾多高級(jí)選擇器技術(shù)的核心 47
4．4 隨后兄弟選擇符彎彎（~） 48
4．4．1 和相鄰兄弟選擇符區(qū)別 48
4．4．2 為什么沒有前面兄弟選擇符 49
4．4．3 如何實(shí)現(xiàn)前面兄弟選擇符的效果 49
4．5 快速了解列選擇符雙管道（||） 52
第5章 元素選擇器 55
5．1 元素選擇器的級(jí)聯(lián)語法 55
5．2 標(biāo)簽選擇器二三事 57
5．2．1 標(biāo)簽選擇器混合其他選擇器的優(yōu)化 57
5．2．2 標(biāo)簽選擇器與自定義元素 57
5．3 特殊的標(biāo)簽選擇器：通配選擇器 58
第6章 屬性選擇器 59
6．1 ID選擇器和類選擇器 59
6．2 屬性值直接匹配選擇器 60
6．2．1 詳細(xì)了解4種選擇器 61
6．2．2 AMCSS開發(fā)模式簡(jiǎn)介 66
6．3 屬性值正則匹配選擇器 67
6．3．1 詳細(xì)了解3種選擇器 68
6．3．2 CSS屬性選擇器搜索過濾技術(shù) 71
6．4 忽略屬性值大小寫的正則匹配運(yùn)算符 72
第7章 用戶行為偽類 75
7．1 手型經(jīng)過偽類：hover 75
7．1．1 體驗(yàn)優(yōu)化與：hover延時(shí) 75
7．1．2 非子元素的：hover顯示 76
7．1．3 純：hover顯示浮層的體驗(yàn)問題 78
7．2 激活狀態(tài)偽類：active 79
7．2．1 ：active偽類概述 79
7．2．2 按鈕的通用：active樣式技巧 80
7．2．3 ：active偽類與CSS數(shù)據(jù)上報(bào) 82
7．3 焦點(diǎn)偽類：focus 82
7．3．1 ：focus偽類匹配機(jī)制 83
7．3．2 ：focus偽類與outline 85
7．3．3 CSS ：focus偽類與鍵盤無障礙訪問 86
7．4 整體焦點(diǎn)偽類：focus-within 89
7．4．1 ：focus-within和：focus偽類的區(qū)別 89
7．4．2 ：focus-within實(shí)現(xiàn)無障礙訪問的下拉列表 89
7．5 鍵盤焦點(diǎn)偽類：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 目標(biāo)偽類：target 101
8．3．1 ：target與錨點(diǎn) 102
8．3．2 ：target交互布局技術(shù)簡(jiǎn)介 104
8．4 目標(biāo)容器偽類：target-within 108
第9章 輸入偽類 109
9．1 輸入控件狀態(tài) 109
9．1．1 可用狀態(tài)與禁用狀態(tài)偽類：enabled和：disabled 109
9．1．2 讀寫特性偽類：read-only和：read-write 113
9．1．3 占位符顯示偽類：placeholder-shown 115
9．1．4 默認(rèn)選項(xiàng)偽類：default 118
9．2 輸入值狀態(tài) 120
9．2．1 選中選項(xiàng)偽類：checked 121
9．2．2 不確定值偽類：indeterminate 133
9．3 輸入值驗(yàn)證 136
9．3．1 有效性驗(yàn)證偽類：valid和：invalid 136
9．3．2 范圍驗(yàn)證偽類：in-range和：out-of-range 140
9．3．3 可選性偽類：required和：optional 142
9．3．4 用戶交互偽類：user-invalid和空值偽類：blank 146
第 10章 樹結(jié)構(gòu)偽類 147
10．1 ：root偽類 147
10．1．1 ：root偽類和元素 147
10．1．2 ：root偽類的應(yīng)用場(chǎng)景 148
10．2 ：empty偽類 150
10．2．1 對(duì)：empty偽類可能的誤解 152
10．2．2 超實(shí)用超高頻使用的：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()偽類之間的關(guān)系 177
11．2．2 ：is()偽類的語法與作用 178
11．3 了解任意匹配偽類：where() 179
11．4 了解關(guān)聯(lián)偽類：has() 179
第 12章 其他偽類選擇器 181
12．1 與作用域相關(guān)的偽類 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 與全屏相關(guān)的偽類：fullscreen 187
12．3 了解語言相關(guān)偽類 188
12．3．1 方向偽類：dir() 189
12．3．2 語言偽類：lang() 190
12．4 了解資源狀態(tài)偽類 191