CSS选择器世界(第2版)电子书

内 容 提 要

前 言

特别感谢

资源与支持

第1章 概述

1.1 为什么CSS选择器很强

1.2 CSS选择器世界的一些基本概念

1.2.1 选择器、选择符、伪类和伪元素

1.2.2 CSS选择器的作用域

1.2.3 CSS选择器的命名空间

1.3 无效CSS选择器的特性与实际应用

第2章 CSS声明的优先级

2.1 继承与级联

2.1.1 优先级的底层——继承

2.1.2 优先级的中枢——级联

2.2 详解@layer规则

2.2.1 @layer规则解决的问题

2.2.2 掌握@layer规则的语法

2.2.3 使整个CSS变成@layer

2.2.4 @layer规则的嵌套

2.3 叛逆的!important

2.3.1 !important与层级跨越

2.3.2 !important的逆向越级

2.4 CSS选择器的优先级

2.4.1 同等级CSS优先级规则概览

2.4.2 CSS选择器优先级的计算规则

2.4.3 256个选择器的越级现象

2.4.4 为什么按钮:hover变色了

第3章 CSS选择器的命名

3.1 CSS选择器是否区分大小写

3.2 CSS选择器命名的合法性

规范与更多字符的合法性

3.3 CSS选择器的命名是一个哲学问题

3.3.1 长命名还是短命名

3.3.2 单命名还是组合命名

3.3.3 面向属性的命名和面向语义的命名

3.3.4 我是如何命名的

3.4 CSS选择器设计的最佳实践

3.4.1 不要使用ID选择器

3.4.2 不要嵌套选择器

3.4.3 不要歧视面向属性的命名

3.4.4 正确使用状态类名

3.4.5 工具带来的变化

3.4.6 最佳实践汇总

第4章 入门必学的选择器

4.1 标签选择器

4.1.1 标签选择器二三事

4.1.2 特殊的标签选择器：通配选择器

4.2 类选择器

4.2.1 类选择器脱颖而出的原因

4.2.2 类选择器的其他小知识

4.3 ID选择器

第5章 精通CSS选择符

5.1 后代选择符——空格（ ）

5.1.1 对CSS后代选择符可能的错误认识

5.1.2 对JavaScript中后代选择符可能的错误认识

5.1.3 :scope伪类

5.2 子选择符——箭头（>）

5.2.1 子选择符和后代选择符的区别

5.2.2 适合使用子选择符的场景

5.3 相邻兄弟选择符——加号（+）

5.3.1 相邻兄弟选择符的相关细节

5.3.2 实现类似:first-child伪类的效果

5.3.3 众多高级选择器技术的核心

5.4 随后兄弟选择符——波浪线（~）

5.4.1 随后兄弟选择符和相邻兄弟选择符的区别

5.4.2 如何实现前面兄弟选择符的效果

5.5 快速了解列选择符——双管道（||）

第6章 被低估的属性选择器

6.1 属性值匹配选择器逐渐兴起

6.2 属性值直接匹配选择器

6.2.1 详细了解4种选择器

6.2.2 AMCSS开发模式简介

6.3 属性值正则匹配选择器

6.3.1 详细了解3种选择器

6.3.2 CSS属性选择器搜索过滤技术

6.4 忽略属性值大小写的正则匹配运算符

第7章 常见交互行为的实现

7.1 :hover伪类与悬停交互开发

7.1.1 体验优化与:hover延时

7.1.2 非子元素的:hover显示

7.1.3 纯:hover显示浮层的体验问题

7.2 使用:active伪类实现点击反馈

7.2.1 :active伪类概述

7.2.2 按钮的通用:active样式技巧

7.2.3 :active伪类与CSS数据上报

7.3 聚焦行为伪类:focus与用户体验

7.3.1 :focus伪类匹配机制

7.3.2 :focus伪类与outline轮廓

7.3.3 CSS:focus伪类与键盘无障碍访问

7.4 非常实用的整体焦点伪类:focus-within

7.4.1 :focus-within伪类和:focus伪类的区别

7.4.2 :focus-within伪类实现无障碍访问的下拉列表

7.5 键盘焦点伪类:focus-visible

:focus-visible伪类的作用及背景变化

第8章 通过树结构伪类匹配元素

8.1 :root伪类

8.1.1 :root伪类匹配的究竟是什么

8.1.2 :root伪类的应用场景

8.2 要多使用:empty伪类

8.2.1 对:empty伪类可能存在的误解

8.2.2 超实用超高频使用的:empty伪类

8.3 比较实用的子索引伪类

8.3.1 :first-child伪类和:last-child伪类

8.3.2 给力的:only-child伪类

8.3.3 :nth-child()伪类和:nth-last-child()伪类

8.4 匹配类型的子索引伪类

8.4.1 :first-of-type伪类和:last-of-type伪类

8.4.2 :only-of-type伪类

8.4.3 :nth-of-type()伪类和:nth-last-of-type()伪类

第9章 不容小觑的逻辑组合伪类

9.1 务必掌握的否定伪类:not()

告别重置，全部交给:not()伪类

9.2 不要小看任意匹配伪类:is()

9.2.1 :is()伪类与:matches()伪类及:any()伪类之间的关系

9.2.2 :is()伪类的语法和两大作用

9.2.3 :is()伪类在Vue等框架中的妙用

9.3 实用的优先级调整伪类:where()

9.4 姗姗来迟的关联伪类:has()

第10章 链接与锚点开发相关的伪类

10.1 链接历史伪类:link和:visited

10.1.1 深入理解:link伪类

10.1.2 怪癖最多的CSS伪类:visited

10.2 值得关注的超链接伪类:any-link

:any-link伪类相比于:link伪类的优点

10.3 实用却很少使用的目标伪类:target

10.3.1 :target伪类与锚点

10.3.2 :target伪类交互布局技术简介

10.4 了解目标容器伪类:target-within

10.5 了解链接匹配伪类:local-link

第11章 表单开发相关的伪类

11.1 输入控件状态

11.1.1 可用状态伪类:enabled与禁用状态伪类:disabled

11.1.2 读写特性伪类:read-only和:read-write

11.1.3 占位符显示伪类:placeholder-shown

11.1.4 使用:autofill伪类自定义自动填充样式

11.1.5 默认选项:default伪类

11.2 输入值状态

11.2.1 实用的选中选项伪类:checked

11.2.2 有用的不确定值伪类:indeterminate

11.3 输入值验证

11.3.1 掌握有效性验证伪类:valid和:invalid

11.3.2 熟悉范围验证伪类:in-range和:out-of-range

11.3.3 熟悉可选性伪类:required和:optional

11.3.4 了解用户交互伪类:user-valid和:user-invalid

11.3.5 简单了解空值伪类:blank

11.4 表单元素专用伪元素

11.4.1 使用::placeholder伪元素改变占位符的样式

11.4.2 使用::file-selector-button伪元素匹配文件选择输入框的按钮

第12章 Web Components开发中的选择器

12.1 使用:defined伪类判断组件是否初始化

12.1.1 普通元素的:defined适配规则

12.1.2 Safari不支持内置自定义元素的处理

12.2 使用:host伪类匹配Shadow树根元素

12.3 使用伪类:host()匹配Shadow树根元素

12.4 Shadow树根元素上下文匹配伪类:host-context()

12.5 使用::part伪元素穿透Shadow DOM元素

::part伪元素对<slot>元素也是有效的

第13章 音视频开发中的选择器

13.1 音视频元素各种状态的匹配

13.1.1 使用:playing伪类、:paused伪类和:seeking伪类匹配播放状态

13.1.2 加载状态伪类:buffering和:stalled

13.1.3 声音控制伪类:muted和:volume-locked

13.2 视频字幕样式的控制

13.2.1 使用::cue伪元素控制字幕的样式

13.2.2 了解:current、:past和:future这些时间维度的伪类

第14章 语言和文字相关的选择器

14.1 了解语言相关的伪类

14.1.1 方向伪类:dir()

14.1.2 语言伪类:lang()

14.2 全新的文字相关的伪元素

14.2.1 ::mark伪元素简介

14.2.2 使用::target-text伪元素高亮锚定的文字

14.2.3 使用::spelling-error伪元素和::grammar-error伪元素高亮拼写和语法错误

第15章 元素特殊显示状态匹配伪类

15.1 了解模态层匹配伪类:modal

15.2 了解全屏相关的伪类:fullscreen

15.3 了解画中画伪类:picture-in-picture

15.4 使用::backdrop伪元素改变底部蒙层