成为前端高手很容易吗？

有人说，要成为前端高手很容易，就是先学好 HTML/CSS/JavaScript 基础三剑客。然后再学会使用前端框架的三座大山——Vue/React/Angular，快则三月，慢也就半年，前端的活就没有搞不定的了。

会用框架就算是一名优秀的前端开发吗？

这是一个认知误区，前端程序员不能将框架的能力当成是自己的能力。厉害的是框架，而不是自己。框架只是工具，它是辅助程序员用来更高效地完成工作，它并不能解决所有的问题。

遗憾的是，不少前端程序员在工作中遇到瓶颈之后，就将自己的困境归咎于公司管理或者行业大环境，却未从自身来发现问题。因此有些前端程序员一边想着转型后台开发，一边还劝退其他初学者，这是搞错了方向。

其实前端技术的特点，就是入门门槛低，但也极具深度，要成为真正的高手并不容易。所以要突破只会使用框架的水平，还要在基础知识上深入学习下去。

CSS 技术往往会被认为是三剑客中相对简单的，但用好它往往能让工作事半功倍。有一位前端大神就对 CSS 深入研究之后，挖掘出许多有用特性，刷新了前端程序员们的认知，原来 CSS 也可以这么玩的。

现在，我们就跟着大神一起学 CSS，走向高手之路吧。

大神是怎么学 CSS 的

张鑫旭，目前在阅文集团担任前端高级技术经理，他主导开发的 LuLu UI，是一款面向桌面端和移动端网页开发的开源组件库，支持了多个千万级 PV 的大型项目。他前端功力甚是了得，是国内公认的大神级程序员。

张大神从 2009 年开始写原创技术文章，至今创作了 800 多篇文章，年访问量接近千万次。在他的个人博客上，就有对 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 选择器可以分为四种，下面逐一说明：

• 选择器：CSS 声明块前的标签、类名等。例如body { font: menu; }
• 选择符：有五种，分别是表示后代关系的空格（ ）、表示父子关系的箭头（>）、表示相邻兄弟关系的加号（+）、表示兄弟关系的波浪线（~），以及表示列关系的双管道（||）；
• 伪类：名称前以冒号（:）分隔，通常与浏览器行为和用户行为相关联，伪类和选择符相互配合可以实现非常多的纯 CSS 交互效果；
• 伪元素：名称前以两双冒号（::）分隔，可用于设置元素指定部分样式。常用选项有 ::before、::after、::first-letter 和::first-line 等。

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

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

张大神一定会很有礼貌地递过去一本《CSS 选择器世界（第2版）》，然后谦虚地说：“看看我写的这本书，里面的知识有没有你不知道的？”

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

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

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

所以这不是一本简单的入门书，一些前端老人都未必全都知道里面的知识。对于追求进步，想要突破技术瓶颈的前端程序员来说，学习《CSS 选择器世界（第2版）》是非常好的进阶之路。

飞速发展的 CSS

CSS 规范由 W3C 组织维护更新，伴随着互联网从桌面端到移动端的发展，CSS 规范也在快速地推出新特性。为了适应 Web 技术发展的要求，CSS 工作组决定从 CSS2.1 之后，将 CSS 按特性划分为独立的模块，这些模块按自己的进度去实现标准化。

这使得从形式上来说，CSS3 并没有一个具体的标准，而是由不断扩充的模块构成的标准集合。CSS 工作组会定期发布成熟模块组的快照，对于前端程序员来说，就要保持对 CSS 标准的敏感度，追踪最新的技术进展。

张大神在十多年的研究过程中，对 CSS 标准密切关注，时时更新自己的知识体系。他在创作《CSS 选择器世界》的过程中，不仅要尽可能地囊括有潜力的新特性，还要保持技术前瞻性，确信所选特性在未来会有广泛的影响。

所以，在《CSS 选择器世界》第 1 版于 2019 年出版之后不到三年时间，张大神又对内容进行了大幅修改，推出了《CSS 选择器世界（第2版）》。在第 1 版的基础上，第 2 版对选择器的特性、兼容性进行了更新，介绍了多个标准中新增的选择器。

其中新增的:has()伪类让张大神翘首以盼了十几年，因为它可以实现真正意义上的父选择器效果。还介绍了支持音视频开发的选择器，使得富媒体开发更加便捷，以及张大神这几年积累的有价值的经验，都一并写到了第 2 版中。

张大神自己也在《CSS 选择器世界（第2版）》的前言中感叹：CSS 的发展太快了。不过这也是前端技术的特点，如果感觉自己有点找不着北，那就不妨跟随大神的脚步一起前进吧。

CSS 三部曲的世界

除了《CSS 选择器世界（第2版）》，张大神另外还创作了《CSS 世界》和《CSS 新世界》，合称为“CSS 三部曲”。这是张大神给前端程序员们贡献的一套 CSS 宝藏，可以说啃下这三部曲，CSS 能达到最佳实践信手拈来的水平。

《CSS 世界》以“流”为线索，全面深入地讲解了从结构、内容到美化等方面的大量知识点，是 CSS 世界的基础。《CSS 新世界》则对 CSS3 之后的上百个新特性进行介绍，分享了张大神诸多独门心法。

在学习时，先阅读《CSS 世界》练好基本功，然后再读另外两本提升功力。《CSS 选择器世界（第2版）》和《CSS 新世界》可以根据工作需要同时阅读，不必分前后。

前端技术领域发展快，各种框架层出不穷，这也是让前端程序员心生职业倦怠的一个原因。但这不能成为前端程序员原地停留的借口，而要一面深挖技术根本，一面积极拥抱变化。

跟着张大神练好 CSS，成为前端高手吧！