【图书】CSS选择器世界第2版

有人说，要成为前端高手很容易：先学好 HTML/CSS/JavaScript 三剑客，再学会三大前端框架 ——Vue/React/Angular，快则三个月，慢则半年，前端的工作就没有搞不定的了。

但实际上，会语言、会用框架就算是一名优秀的前端程序员吗？

其实这是一个认知误区，框架的能力不代表前端程序员的能力。遗憾的是，不少前端程序员在工作中遇到瓶颈之后，就将自己的困境归咎于公司管理或者行业大环境，却不从自身找问题。

虽然前端技术门槛低，但也极具深度，要成为真正的高手并不容易。要突破只会使用框架的水平，还要深入学习语言。

CSS 是 HTML/CSS/JavaScript 三剑客中相对简单的，但把它用好了能使效率倍增。有一位前端大神对 CSS 进行深入研究，挖掘出许多有用的特性，刷新了前端程序员的认知：原来 CSS 也可以这么玩！

提到对 CSS 的学习，张鑫旭认为首先要理解这门语言的特殊性。CSS 是一门建立在规则上的语言，和注重逻辑性的编程语言是不同的。习惯使用 C/C++/Java 的程序员，在初次接触 CSS 时可能会将其看作一张大号的配置表，认为它的作用就是把网页属性单独保存出来而已。

这样就限制了对 CSS 的进一步认识，忽视了它在特性间建立联系的能力。如何体系化地看待 CSS 语言？张鑫旭将多年的学习心得和工作经验总结出来，以魔法世界来类比，从宏观上说明 CSS 的结构与特征。

在 CSS 世界中，HTML 是魔法石，选择器是选择法器，CSS 属性是魔法师，属性值是魔法技能。不同的浏览器就是独立的王国，它可以决定是否允许使用魔法石（HTML 标签属性）、是否允许新魔法师 “入籍”（CSS3 新属性）、是否允许魔法师使用某些新技能（CSS 新属性值）。

操作系统是王国所在的世界，不同的操作系统就像平行的世界。例如在 Windows 上，edge 浏览器最强大；在 OS X 与 iOS 上，统治者是 Safari；在 Android 上，WebKit 就是王。

这样一看，CSS 的世界立即鲜活起来，不再是静态割裂的配置，而是与 HTML 一同构成的整体。在这个世界里，CSS 选择器是支柱，接下来让我们跟着张大神深入 CSS 选择器的世界吧。

CSS 选择器：CSS 世界的支柱

我们先来了解一些基本概念。CSS 选择器可以分为 4 种，下面逐一说明：

• 选择器：CSS 声明块前的标签、类名等。例如 body { font: menu; }

• 选择符：有 5 种，分别是表示后代关系的空格（ ）、表示父子关系的箭头（>）、表示相邻兄弟关系的加号（+）、表示兄弟关系的波浪线（~），以及表示列关系的双管道（||）；

• 伪类：名称前以冒号（:）分隔，通常与浏览器行为和用户行为相关联，伪类和选择符相互配合可以实现非常多的纯 CSS 交互效果；

• 伪元素：名称前以两双冒号（::）分隔，可用于设置元素指定部分样式。常用选项有 ::before、::after、::first-letter 和::first-line 等。

CSS 世界的支柱由上述 4 种选择器构成，它们与 HTML 结构、浏览器行为、用户行为相互依存和作用。在不断的碰撞下，将 CSS 选择器强大的功能发挥出来。

对一些前端程序员来说，CSS 选择器不过 “就那么点东西”。如果他们听说有人专门为 CSS 选择器技术写了一本书，估计会瞪大眼睛问：“这有什么好写的？”

如果只掌握常用的几个基础选择器，也可以把页面做出来。但这样做事，就好像手里拿把锤子，看什么都是钉子一样。而前端技术是一个快速发展的领域，指望一年经验重复用十年是不现实的。

比方说，有时为了实现一个复杂的交互行为，辛辛苦苦写了几百行 JavaScript 代码，结果 CSS 只用一行代码就能搞定，这就是知道和不知道的差距。

《CSS 选择器世界（第 2 版）》并不是穷举所有 CSS 选择器的说明书，而是以一种体系化的方式梳理 CSS 选择器知识。同时张鑫旭结合自己多年工作中踩过的坑，给出了许多含金量超高的最佳实践建议。

所以这不是一本简单的入门书，一些前端老人都未必全都知道里面的知识。对追求进步，想要突破技术瓶颈的前端程序员来说，本书是非常好的进阶之路。

对这《CSS 选择器世界第 2 版》有兴趣的读者，可以通过下方二维码了解详情。