CSS选择器世界

出版者:人民邮电出版社

作者:张鑫旭

页数:192

出版时间:2019-10-1

价格:CNY 59.00

装帧:平装

isbn号码:9787115517227

具体描述

CSS选择器是CSS世界的支柱，撑起了整个精彩纷呈的CSS世界。本书专门介绍CSS选择器的相关知识。在本书中，作者结合多年从业经验，在CSS基础知识之上，充分考虑前端开发人员的开发需求，以CSS选择器的基本概念、优先级、命名、*佳实践以及各伪类选择器的概述和适用场景为技术主线，为CSS开发人员介绍有竞争力的知识和技能。此外，本书配有专门的网站，用以进行实例展示和问题答疑。

作为一本CSS进阶书，本书非常适合有一定CSS基础的前端开发人员学习和参考。

作者简介

张鑫旭，前端开发工程师，国内知名前端博客“鑫空间-鑫生活”博主，目前就职于阅文集团用户体验设计部（YUX），担任技术经理。2007年开始接触前端，10年来一直工作在前端开发一线，在HTML/CSS等与交互体验关系密切的领域花了大量的时间学习和研究，有比较多的心得体会。

目录信息

第 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
· · · · · · (收起)

用户评价

老实讲，我买这本书的时候，心里是有点忐忑的，毕竟“选择器”这个主题听起来就跟打地基一样枯燥。但《CSS选择器世界》彻底打消了我的疑虑。作者的功力深厚，他不仅精通CSS规范，更重要的是他似乎对前端设计师和开发者的思维模式有着深刻的洞察。书中的一个章节专门讨论了“语义化选择器”的艺术，这远超出了单纯的技术范畴，上升到了代码哲学的高度。作者倡导的不仅仅是让代码“能跑起来”，而是要让代码“能被读懂，能自我说明”。他通过对比不同命名规范下的选择器效果，让我开始重新审视自己写了多年的CSS类名。这本书的结构设计堪称一绝，每一章的结尾都设计了一个“挑战模块”，要求读者根据给出的DOM结构，手写出效率最高、最简洁的选择器来完成特定样式目标。这极大地锻炼了我的实战能力，比单纯看例子的效果好太多了。这是一本真正意义上的“实战宝典”。

这本《CSS选择器世界》真是让人眼前一亮，完全颠覆了我对CSS选择器那些枯燥概念的刻板印象。作者没有采用那种教科书式的干巴巴的讲解，而是用一种非常生动、近乎叙事的方式，将复杂的选择器规则编织成了一个个引人入胜的小故事。我记得有一章讲到属性选择器时，作者竟然把它比作一个寻宝游戏，每个属性值都是一个线索，你需要用正确的工具（选择器）才能打开宝箱。这种比喻极其贴切，让我立刻就能理解那些复杂的正则表达和属性匹配的底层逻辑。更让我惊喜的是，书中对那些不太常用的伪类和伪元素，比如 `::marker` 或者 `:has()`，都有非常深入的探讨，并且给出了大量在实际项目中可以立即应用的高级技巧。读完后，我感觉自己看待CSS代码的视角都变了，不再是简单地堆砌选择器，而是像一位建筑师在精确地规划结构。这本书的排版和配图也做得非常用心，很多图示清晰地展示了选择器的优先级和作用范围，即使是初学者也能很快上手，而资深开发者也能从中挖掘出新的灵感。总之，它不仅仅是一本技术手册，更像是一本引导你探索前端美学世界的“秘籍”。

我是一个对细节有着偏执要求的开发者，通常认为CSS规范的讲解太过死板。然而，《CSS选择器世界》这本书却将规范的严谨性与学习的趣味性完美融合。书中对某些“边缘情况”的处理尤为出色，比如多个伪类同时应用时的优先级判定，或者在表格布局中，某些选择器在不同浏览器中表现不一致的细节。作者没有回避这些令人头疼的角落，反而将其作为深入理解选择器工作原理的契机。我尤其喜欢其中对“选择器链”进行拆解分析的部分，作者用流程图的方式，清晰地展示了浏览器引擎是如何一步步匹配DOM节点到CSS规则的。这种自底向上、由浅入深的讲解方式，极大地增强了读者的逻辑思维能力。阅读这本书后，我感觉我对CSS的掌控力达到了一个新的层次，它不再是一个需要不断查文档的工具，而变成了一个可以随心所欲驾驭的艺术媒介。这本书的深度和广度，绝对是CSS学习者案头必备的经典之作。

这本书的写作风格极其口语化，读起来完全没有传统技术书籍那种拒人于千里之外的冰冷感。仿佛作者正坐在你对面，泡着一杯咖啡，耐心而细致地跟你分享他的经验。我尤其欣赏作者在书中穿插的一些“黑历史”——即那些曾经被广泛使用但后来被证明是性能黑洞或维护灾难的选择器用法。通过这些反面教材，我们不仅能知道“该怎么做”，更能深刻理解“为什么不该那样做”。例如，关于ID选择器与类选择器的滥用对比分析，作者用生动的例子证明了过度依赖ID选择器是如何把CSS的灵活性扼杀掉的。此外，书中对如何利用选择器进行性能优化部分，讲解得尤为到位。它没有停留在理论层面，而是给出了量化的对比数据，告诉你某些选择器组合会如何拖慢渲染树的构建过程。对于我这种追求极致性能的前端工程师来说，这简直是醍醐灌顶。这本书是那种值得反复翻阅，每次都能找到新洞察的宝藏。

坦白说，我对技术书籍的阅读体验通常是比较功利的，目的性很强，但《CSS选择器世界》这本书给我带来了久违的“沉浸感”。它的叙事节奏把握得极好，从最基础的元素选择器讲起，层层递进，仿佛带着读者进行了一次结构化的“考古发掘”。最妙的是，作者在讲解组合器（如子代选择器 `>` 和通用兄弟选择器 `~`）时，采用了类比古代家族关系图谱的方式，将DOM树的层级关系清晰地梳理出来，让你一下子就能领悟到不同组合方式带来的作用域差异。我特别欣赏作者在书中对浏览器兼容性问题的处理方式，不是简单地罗列“哪些浏览器支持什么”，而是深入分析了不同引擎在解析选择器逻辑时的细微差别，这对于构建健壮的、面向未来的前端架构至关重要。阅读过程中，我甚至有些停不下来，因为每当我以为自己掌握了一个知识点时，作者总能在下一页抛出一个更具挑战性的实际案例来检验我的理解。这本书的价值远超其定价，它成功地将一个看似沉闷的主题，打磨成了一件兼具深度和广度的艺术品。

CSS的伪类真的是细而杂.

对于选择器的使用是很细致了，也有挺多使用场景的案例以及作者自身实践的心得，需要结合自己的项目场景权衡选择器的使用。

干货满满，学到很多东西

书很薄，里面介绍了大量兼容IE的内容，有很多CSS技巧，大开眼界

书很薄，里面介绍了大量兼容IE的内容，有很多CSS技巧，大开眼界