第 1章 概述1
1.1 CSS3出現的歷史和背景1
1.2 模塊化的CSS新世界2
第 2章 需要提前了解的知識4
2.1 互通互聯的CSS數據類型4
2.1.1 為什麼要關注CSS數據類型4
2.1.2 幾個常見數據類型的簡單介紹5
2.2 學會看懂CSS屬性值定義語法7
2.2.1 學習CSS屬性值定義語法的好處7
2.2.2 CSS屬性值定義語法詳解8
2.3 了解CSS全局關鍵字屬性值12
2.3.1 用過都說好的繼承關鍵字inherit12
2.3.2 可以一用的初始值關鍵字initial12
2.3.3 了解一下不固定值關鍵字unset14
2.3.4 我個人很喜歡的恢復關鍵字revert15
2.4 指代所有CSS屬性的all屬性17
2.5 CSS新特性的漸進增強處理技巧18
2.5.1 直接使用CSS新特性18
2.5.2 利用屬性值的語法差異實現兼容19
2.5.3 借助偽素區分瀏覽器的技巧21
2.5.4 @supports規則下的漸進增強處理23
2.5.5 對CSS新特性漸進增強處理的總結26
第3章 從增強已有的CSS屬性開始28
3.1 貫穿全書的尺寸體繫28
3.1.1 從width:fit-content聲明開始29
3.1.2 stretch、available和fill-available關鍵字究竟用哪個32
3.1.3 深入了解min-content關鍵字35
3.1.4 快速了解max-content關鍵字39
3.2 深入了解CSS邏輯屬性40
3.2.1 CSS邏輯屬性有限的使用場景41
3.2.2 inline/block與start/素43
3.2.3 width/height屬性與inline-size/block-size邏輯屬性44
3.2.4 由margin/padding/border演變而來的邏輯屬性44
3.2.5 text-align屬性支持的邏輯屬性值45
3.2.6 最有用的CSS邏輯屬性inset46
3.3 在CSS邊框上做文章47
3.3.1 曇花一現的CSS多邊框47
3.3.2 獨一無二的border-image屬性47
3.3.3 border-image屬性與漸變邊框57
3.4 position屬性的增強60
3.4.1 深入了解sticky屬性值與黏性定位61
3.4.2 position:sticky聲明的精彩應用—層次滾動65
3.5 font-family屬性和@font-face規則新特性66
3.5.1 system-ui等全新的通用字體族66
3.5.2 local()函數與繫統字體的調用73
3.5.3 unicode-range屬性的詳細介紹74
3.5.4 woff/woff2字體75
3.5.5 font-display屬性與自定義字體的加載渲染77
3.6 的中斷與換行79
3.6.1 使用keep-all屬性值優化中文排版80
3.6.2 break-all屬性值的問題和line-break屬性81
3.6.3 hyphens屬性與連字符83
3.6.4 與精確換行的控制85
3.6.5 overflow-wrap:anywhere聲明有什麼用86
3.7 text-align屬性相關的新特性88
3.7.1 match-parent等新屬性值88
3.7.2 text-align屬性的字符對齊特性89
3.8 text-decoration屬性全新升級90
3.8.1 text-decoration屬性現在是一種縮寫90
3.8.2 text-decoration屬性的累加特性91
3.8.3 唯一實用的wavy波浪線91
3.8.4 可能需要text-underline-position:under聲明92
3.8.5 更需要text-underline-offset屬性94
3.8.6 講一講text-decoration-skip屬性的故事95
3.9 color屬性與顏色設置97
3.9.1 148個顏色關鍵字98
3.9.2 transparent關鍵字99
3.9.3 currentColor關鍵字100
3.9.4 RGB顏色和HSL顏色的新語法101
3.10 必學必會的background屬性新特性103
3.10.1 最實用的當屬background-size屬性103
3.10.2 background屬性最成功的設計—多背景108
3.10.3 background-clip屬性與背景顯示區域限制110
3.10.4 background-clip:text聲明與漸變文字效果111
3.10.5 background-origin屬性與背景定位原點控制112
3.10.6 space和round平鋪模式113
3.10.7 可以指定background-position的起始方位了114
3.11 outline相關新屬性outline-offset116
3.12 cursor屬性新增的手形效果117
3.12.1 放大手形zoom-in和縮小手形zoom-out簡介117
3.12.2 抓取手形grab和放手手形grabbing簡介118
第4章 更細致的樣式表現119
4.1 透明度控制屬性opacity119
4.1.1 opacity屬性的疊加計算規則119
4.1.2 opacity屬性的邊界特性與應用120
4.2 深入了解圓角屬性border-radius124
4.2.1 了解border-radius屬性的語法124
4.2.2 弄懂圓角效果是如何產生的126
4.2.3 border-radius屬性渲染border邊框的細節127
4.2.4 border-radius屬性的高級應用技巧129
4.3 box-shadow盒陰影131
4.3.1 inset關鍵字與內陰影131
4.3.2 不要忽略第四個長度值133
4.3.3 多陰影特性與圖形繪制134
4.3.4 box-shadow動畫與性能優化137
4.4 CSS 2D變換138
4.4.1 從基本的變換方法說起138
4.4.2 transform屬性的若干細節特性141
4.4.素應用transform屬性後的變化144
4.4.4 深入了解矩陣函數matrix()148
4.4.5 常常被遺忘的transform-origin屬性152
4.4.6 scale()函數縮放和zoom屬性縮放的區別153
4.4.7 了解全新的translate、scale和rotate屬性154
4.5 簡單實用的calc()函數155
4.5.1 關於calc()函數155
4.5.2 了解min()、max()和clamp()函數157
第5章 更強的視覺表現160
5.1 CSS漸變160
5.1.1 深入了解linear-gradient()線性漸變160
5.1.2 深入了解radial-gradient()徑向漸變165
5.1.3 了解conic-gradient()錐形漸變170
5.1.4 重復漸變173
5.2 CSS 3D變換174
5.2.1 從常用的3D變換函數說起174
5.2.2 必不可少的perspective屬性176
5.2.3 用translateZ()函數尋找透視位置177
5.2.4 指定perspective透視點的兩種寫法178
5.2.5 理解perspective-origin屬性179
5.2.6 transform-style:preserve-3d聲明的含義180
5.2.7 backface-visibility屬性的作用180
5.2.8 值得學習的旋轉木馬案例182
5.2.9 3D變換與GPU加速184
5.3 CSS過渡184
5.3.1 你可能不知道的transition屬性知識185
5.3.2 了解三次貝塞爾時間函數類型188
5.3.3 transition與visibility屬性的應用指南190
5.4 CSS動畫192
5.4.1 初識animation屬性193
5.4.2 @keyframes規則的語法和特性194
5.4.3 動畫命名與數據類型196
5.4.4 負延時與即時播放效果198
5.4.5 reverse和alternate關鍵字的區別和應用200
5.4.6 動畫播放次數可以是小數203
5.4.7 forwards和backwards屬性值究竟是什麼意思204
5.4.8 如何暫停和重啟CSS動畫207
5.4.9 深入理解steps()函數209
5.4.10 標簽嵌套與動畫實現的小技巧212
第6章 全新的布局方式214
6.1 分欄布局214
6.2 彈性布局224
6.3 網格布局263
6.4 CSS Shapes布局308
第7章 不同設備的適配與響應317
7.1 @media規則317
7.2 環境變量函數env()328
7.3 rem和vw單位與移動端適配最佳實踐330
7.4 使用touch-action屬性控制設備的觸摸行為335
7.5 image-set()函數與多倍圖設置337
第8章 CSS的變量函數var()與自定義屬性340
8.1 CSS變量的語法、特性和細節340
8.2 CSS自定義屬性的設置與獲取348
8.3 使用content屬性顯示CSS自定義屬性值的技巧349
8.4 CSS變量的自定義語法技術簡介350
第9章 文本字符處理能力的升級354
9.1 文字的美化與裝飾354
9.2 文字的旋轉與閱讀方向365
9.3 文本字符的尺寸控制370
9.4 文字渲染與字體呈現374
9.5 字體特征和變體382
9.6 可變字體395
第 10章 圖片等多媒體的處理402
10.1 圖片素的內在尺寸控制402
10.2 使用image-orientation屬性糾正圖片的方向406
10.3 image-rendering屬性與圖像的渲染408
10.4 不常用的圖像類型函數411
第 11章 更絢麗的視覺表現415
11.1 深入了解CSS濾鏡屬性filter416
11.2 姐妹花濾鏡屬性backdrop-filter429
11.3 深入了解CSS混合模式433
11.4 混合模式屬性background-blend-mode448
11.5 使用isolation: isolate聲明隔離混合模式454
第 12章 更豐富的圖形處理457
12.1 超級實用的CSS遮罩457
12.2 同樣實用的CSS剪裁屬性clip-path478
12.3 -webkit-box-reflect屬性與倒影效果的實現492
12.4 使用offset屬素的不規則運動496
第 13章 用戶行為與體驗增強508
13.1 滾動行為相關508
13.2 點擊行為相關519
13.3 拉伸行為相關521
13.4 輸入行為相關523
13.5 選擇行為相關524
13.6 打印行為相關527
13.7 性能增強532
第 14章 素的CSS控制541
14.1 使用CSS屬性直接繪制SVG圖形541
14.2 CSS屬性下的填充設置545
14.3 CSS屬性下的描邊設置550
14.4 CSS屬性下的標記設置555
第 15章 Houdini是CSS新的未來嗎564
15.1 了解CSS Paint API564
15.2 了解CSS Properties & Values API568
15.3 了解CSS Parser API570
15.4 詳細了解CSS Layout API571
15.5 快速了解CSS Typed OM577
15.6 簡單了解Animation Worklet578
15.7 了解Font Metrics API579
第 1章概述 1
1．1 CSS世界的“世界觀” 1
1．2 世界都是創造出來的 3
1．3 CSS完勝SVG的武器—流 4
1．3．1 何為“流” 5
1．3．2流是如何影響整個CSS世界的 6
1．3．3 什麼是流體布局 6
1．4 CSS世界的開啟從IE8開始 6
1．5 table自己的世界 7
1．6 CSS新世界—CSS3 7
第 2章需提前了解的術語和概念 8
2．1 務必了解的CSS世界的專業術語 8
2．2 了解CSS世界中的“未定義行為” 11
第3章素與基本尺寸 13
3．1素 13
3．1．1 為什麼list-i素會出現項目符號 15
3．1．2 display：inline-table的盒子是怎樣組成的 16
3．1．3 width/height作用在哪個盒子上 16
3．2 width/height作用的具體細節 16
3．2．1 深藏不露的width：auto 17
3．2．2 width值作用的細節 24
3．2．3 CSS流體布局下的寬度分離原則 27
3．2．4 改變width/height作用細節的box-sizing 29
3．2．5 相對簡單而單純的height：auto 33
3．2．6 關於height：100% 33
3．3 CSS min-width/max-width和min-height/max-height二三事 37
3．3．1 為流體而生的min-width/max-width 38
3．3．2 與眾不同的初始值 38
3．3．3 超越!important 39
3．3．4 任素的展開收起動畫技術 40
3．4素 42
3．4．1素素 42
3．4．2 內聯世界深入的基礎—內聯盒模型 42
3．4．3 幽靈空白節點 44
第4章盒尺寸四大家族 45
4．1 深入理解content 45
4．1．1 content素 45
4．1．2 content內容生成技術 57
4．2 溫和的padding屬性 73
4．2．1 paddi素的尺寸 73
4．2．2 padding的百分比值 77
4．2．3素內置的padding 79
4．2．4 padding與圖形繪制 80
4．3 激進的margin屬性 81
4．3．1 marg素尺寸以及相關布局 82
4．3．2 margin的百分比值 87
4．3．3 正確看待CSS世界裡的margin合並 87
4．3．4 深入理解CSS中的margin：auto 94
4．3．5 margin無效情形解析 97
4．4 border屬性 100
4．4．1 為什麼border-width不支持百分比值 100
4．4．2 了解各種border-style類型 101
4．4．3 border-color和color 105
4．4．4 border與透明邊框技巧 106
4．4．5 border與圖形構建 108
4．4．6 border等高布局技術 109
第5章素與流 111
5．1 字母x—CSS世界中隱匿的舉足輕重的角色 111
5．1．1 字母x與CSS世界的基線 111
5．1．2 字母x與CSS中的x-height 112
5．1．3 字母x與CSS中的ex 113
5．2素的基石line-height 114
5．2．1素的高度之本—line-height 114
5．2．2 為什麼line-height可以素“垂直居中” 119
5．2．3 深入line-height的各類屬性值 121
5．2．4素line-height的“大值特性” 124
5．3 line-height的好朋友vertical-align 126
5．3．1 vertical-align家族基本認識 127
5．3．2 vertical-align作用的前提 129
5．3．3 vertical-align和line-height之間的關繫 131
5．3．4 深入理解vertical-align線性類屬性值 135
5．3．5 深入理解vertical-align文本類屬性值 141
5．3．6 簡單了解vertical-align上標下標類屬性值 142
5．3．7 無處不在的vertical-align 143
5．3．8 基於vertical-align屬性的水平垂直居中彈框 144
第6章流的破壞與保護 147
6．1 魔鬼屬性float 147
6．1．1 float的本質與特性 147
6．1．2 float的作用機制 151
6．1．3 float更深入的作用機制 154
6．1．4 float與流體布局 155
6．2 float的天然克星clear 157
6．2．1 什麼是clear屬性 157
6．2．2 成事不足敗事有餘的clear 158
6．3 CSS世界的結界—BFC 160
6．3．1 BFC的定義 160
6．3．2 BFC與流體布局 160
6．4 結界overflow 164
6．4．1 overflow剪裁界線border box 165
6．4．2 了解overflow-x和overflow-y 166
6．4．3 overflow與滾動條 166
6．4．4 依賴overflow的樣式表現 169
6．4．5 overflow與錨點定位 170
6．5 float的兄弟position：absolute 177
6．5．1 absolute的包含塊 178
6．5．2 具有相對特性的無依賴absolute定位 184
6．5．3 absolute與text-align 191
6．6 absolute與overflow 193
6．7 absolute與clip 195
6．7．1 重新認識的clip屬性 196
6．7．2 深入了解clip的渲染 198
6．8 absolute的流體特性 199
6．8．1 當absolute遇到left/top/right/bottom屬性 199
6．8．2 absolute的流體特性 200
6．8．3 absolute的margin：auto居中 202
6．9 position：relative纔是大哥 202
6．9．1 relative對absolute的限制 203
6．9．2 relative與定位 203
6．9．3 relative的zui小化影響原則 206
6．10 強悍的position：fixed固定定位 207
6．10．1 position：fixed不一樣的“包含塊” 207
6．10．2 position：fixed的absolute模擬 208
6．10．3 position：fixed與背景鎖定 209
第7章CSS世界的層疊規則 211
7．1 z-index隻是CSS層疊規則中的一葉小舟 211
7．2 理解CSS世界的層疊上下文和層疊水平 212
7．2．1 什麼是層疊上下文 212
7．2．2 什麼是層疊水平 212
7．3素的層疊順序 212
7．4 務必牢記的層疊準則 214
7．5 深入了解層疊上下文 214
7．5．1 層疊上下文的特性 214
7．5．2 層疊上下文的創建 214
7．5．3 層疊上下文與層疊順序 217
7．6 z-index負值深入理解 219
7．7 z-index“不犯二”準則 223
第8章強大的文本處理能力 225
8．1 line-height的另外一個朋友font-size 225
8．1．1 font-size和vertical-align的隱秘故事 225
8．1．2 理解font-size與ex、em和rem的關繫 227
8．1．3 理解font-size的關鍵字屬性值 229
8．1．4 font-size：0與文本的隱藏 231
8．2 字體屬性家族的大家長font-family 232
8．2．1 了解襯線字體和無襯線字體 233
8．2．2 等寬字體的實踐價值 234
8．2．3 中文字體和英文名稱 236
8．2．4 一些補充說明 237
8．3 字體家族其他成員 238
8．3．1 貌似粗獷、實則精細無比的font-weight 238
8．3．2 具有近似姐妹花屬性值的font-style 241
8．3．3 不適合國情的font-variant 242
8．4 font屬性 242
8．4．1 作為縮寫的font屬性 242
8．4．2 使用關鍵字值的font屬性 243
8．4．3 font關鍵字屬性值的應用價值 246
8．5 真正了解@font face規則 247
8．5．1 @font face的本質是變量 247
8．5．2 @font face與字體圖標技術 255
8．6 文本的控制 258
8．6．1 text-indent素縮進 258
8．6．2 letter-spacing與字符間距 261
8．6．3 word-spacing與單詞間距 263
8．6．4 了解word-break和word-wrap的區別 264
8．6．5 white-space與換行和空格的控制 265
8．6．6 text-ali素對齊 267
8．6．7 如何解決text-decoration下劃線和文本重疊的問題 271
8．6．8 一本萬利的text-transform字符大小寫 273
8．7 了解：first-letter/：first-li素 274
8．7．1 深入：first-lett素及其實例 274
8．7．2 故事相對較少的：first-li素 277
第素的裝飾與美化 280
9．1 CSS世界的color很單調 280
9．1．1 少得可憐的顏色關鍵字 280
9．1．2 不支持的transparent關鍵字 282
9．1．3 不支持的currentColor變量 282
9．1．4 不支持的rgba顏色和hsla顏色 282
9．1．5 支持卻雞肋的繫統顏色 283
9．2 CSS世界的background很單調 285
9．2．1素的background-image到底加不加載 285
9．2．2 與眾不同的background-position百分比計算方式 286
9．2．3 background-repeat與渲染性能 287
9．2．4 外強中干的background-attachment：fixed 288
9．2．5 background-color背景色永遠是很低的 289
9．2．6 利用多背景的屬性hack小技巧 290
9．2．7 漸變背景和rgba背景色的兼容處理 290
第 1素的顯示與隱藏 292
10．1 displ素的顯隱 294
10．2 visibili素的顯隱 296
10．2．1 不僅僅是保留空間這麼簡單 296
10．2．2 了解visibility：collapse 301
第 11章用戶界面樣式 302
11．1 和border形似的outline屬性 302
11．1．1 萬萬不可在全局設置outline：0 none 302
11．1．2 真正的不占據空間的outline及其應用 304
11．2 光標屬性cursor 307
11．2．1 琳瑯滿目的cursor屬性值 307
11．2．2 自定義光標 314
第 12章流向的改變 315
12．1 改變水平流向的direction 315
12．1．1 direction簡介 315
12．1．2 direction的黃金搭檔unicode-bidi 318
12．2 改變CSS世界縱橫規則的writing-mode 320
12．2．1 writing-mode原本的作用 321
12．2．2 writing-mode不經意改變了哪些規則 324
12．2．3 writing-mode和direction的關繫 328 目錄
第 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
第素選擇器 55
5素選擇器的級聯語法 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 Shado素偽類：host 183
12．1．3 Shado素匹配偽類：host() 184
12．1．4 Shado素上下文匹配偽類：host-context() 185
12．2 與全屏相關的偽類：fullscreen 187
12．3 了解語言相關偽類 188
12．3．1 方向偽類：dir() 189
12．3．2 語言偽類：lang() 190
12．4 了解資源狀態偽類 191
