书名：CSS选择器世界（第2版）
ISBN：978-7-115-60931-1
本书由人民邮电出版社发行数字版。版权所有，侵权必究。
您购买的人民邮电出版社电子书仅供您个人使用，未经授权，不得以任何方式复制和传播本书内容。
我们愿意相信读者具有这样的良知和觉悟，与我们共同保护知识产权。
如果购买者有侵权行为，我们可能对该用户实施包括但不限于关闭该帐号等维权措施，并可能追究法律责任。
著 张鑫旭
责任编辑 刘雅思
人民邮电出版社出版发行 北京市丰台区成寿寺路11号
邮编 100164 电子邮件 315@ptpress.com.cn
网址 http://www.ptpress.com.cn
读者服务热线：(010)81055410
反盗版热线：(010)81055315
读者服务：
微信扫码关注【异步社区】微信公众号，回复“e60931”获取本书配套资源以及异步社区15天VIP会员卡，近千本电子书免费畅读。
CSS选择器是CSS世界的支柱，撑起了整个精彩纷呈的CSS世界。本书专门介绍CSS选择器的相关知识。在本书中，作者结合多年从业经验，在CSS基础知识之上，充分考虑前端开发人员的开发需求，以CSS选择器的基本概念、优先级、命名、最佳实践以及各伪类选择器的适用场景为技术主线，为CSS开发人员介绍有竞争力的知识和技能。本书在第1版的基础上，对选择器的特性、兼容性等相关内容进行了更新，并介绍了新增的选择器。此外，本书配有专门的网站，用以进行实例展示和问题答疑。
作为一本CSS进阶书，本书非常适合有一定CSS基础的前端开发人员学习和参考。
距离《CSS选择器世界》第1版出版才3年多，CSS领域又新增了非常多的新特性，自然也包括很多全新的CSS选择器，其中最具代表性的就是:has()伪类，它可以实现真正意义上的父选择器效果，这可是我翘首以盼十几年的CSS特性。
当然，除了全新的CSS选择器，《CSS选择器世界》第1版介绍过的CSS Level 4选择器也变得更加成熟，开始在生产环境中大放光彩。我积累了不少有价值的经验，值得分享给大家。因此，有必要对《CSS选择器世界》进行再版升级，与时俱进，从实用性出发，让大家能更好地学习与成长。
我相信不少前端开发人员会有这样的疑惑：CSS选择器不就是那点东西，还能写一本书？
这是很正常的想法，因为理论上只要掌握几个基础的CSS选择器（如类选择器），就能实现Web网页开发。由于class属性值可以设置在任意HTML元素上，因此，哪怕你只会类选择器，也能把Web页面重构出来。
这就类似于做菜，就算只有一把菜刀，也能处理各种食材，能切肉、能杀鱼、能削皮。但很显然，对于特定的食材，使用菜刀进行处理并不是最好的选择，例如瓜果削皮，菜刀绝对不如削皮刀好用。
CSS选择器也是如此，存在必有道理。随着Web的不断发展，开发人员所面对的开发场景更加多变，所开发的Web应用也日趋复杂，如果还是借助传统的CSS选择器进行处理，那我们的代码就会很啰唆，并且开发效率较为低下。因此，很多全新的CSS选择器应运而生，可以支持现代Web应用开发，通过语言自身的强大功能帮助开发人员使用更少的时间完成更高质量的代码。
作为一名技术从业人员，本质上，你的职业发展高度与你的专业能力密切相关，而专业能力最直观的体现就是完成的工作又快又好。如果你精通所有的CSS选择器，那么，遇到合适的使用场景时就能“四两拨千斤”，别人可能使用JavaScript写了上百行代码，你用一行CSS代码就搞定了。如果你希望在前端领域有所作为，打破当下止步不前的状态，一定要敬畏技术，保持谦逊，系统学习，至少我自己就是这样不断成就自己的人生的。
本书是“CSS三部曲”中第二部的升级版，和《CSS世界》《CSS新世界》这两本书一起构建了完整的CSS世界，一起阅读收获会更多。
本书非文档，虽体系，但有侧重，基于实用性和真实开发场景构建，去粗取精，有的放矢，让大家阅读更轻松，学习更高效。
本书非入门图书，适合有一定CSS基础的前端人员学习和参考。新手也能通过本书学到很多知识，但往往需要多次反复阅读，因为为了做到内容精练，书中会直接略去过于基础的知识，重在讲“干货”。
本书除了开发经验的分享，还大量阐述对技术的理解，这些理解虽然稀缺，但是比较主观，因此并不能保证百分之百正确，对于我可能理解有误的内容，欢迎读者质疑和挑战。
最后，由于CSS选择器依然在快速发展中，因此本书部分比较前沿的知识点在未来会发生某些小的变动，我会实时跟进，并在官方论坛同步更新。
我专门为“CSS 世界三部曲”制作了一个网站（https://www.cssworld.cn），在那里，读者可以了解更多“CSS 世界三部曲”的相关信息。如果读者有质疑，想挑战，或者要纠错，都欢迎在官方论坛（https://bbs.cssworld.cn/）对应版块进行提问或反馈，也欢迎读者添加微信zhangxinxu-job和我直接沟通交流。
衷心感谢人民邮电出版社的每一个人。
感谢人民邮电出版社的编辑杨海玲，她的专业建议对我帮助很大，她对细节的关注令人印象深刻，她使我的工作变得更加轻松。
感谢那些为提高整个行业CSS水平而默默努力的优秀人士，感谢那些在我成长路上指出错误的前端同仁，他们让我在探索边界的道路上走得更快、更踏实。
感谢读者，你们的支持给了我工作的动力。
最后，最最感谢我的妻子丹丹，没有她在背后的爱和支持，本书一定不会完成得这么顺利。
本书由异步社区出品，社区（https://www.epubit.com/）为您提供相关资源和后续服务。
您还可以扫码二维码， 关注【异步社区】微信公众号，回复“e60931”直接获取,同时可以获得异步社区15天VIP会员卡，近千本电子书免费畅读。
本书提供全书彩色图片。要获得相关配套资源，请在异步社区本书页面中单击
，跳转到下载界面，按提示进行操作即可。注意：为保证购书读者的权益，该操作会给出相关提示，要求输入提取码进行验证。
作者和编辑尽最大努力来确保书中内容的准确性，但难免会存在疏漏。欢迎您将发现的问题反馈给我们，帮助我们提升图书的质量。
当您发现错误时，请登录异步社区，按书名搜索，进入本书页面，单击“提交勘误”，输入勘误信息，单击“提交”按钮即可。本书的作者和编辑会对您提交的勘误进行审核，确认并接受后，您将获赠异步社区的100积分。积分可用于在异步社区兑换优惠券、样书或奖品。
扫描下方二维码，您将会在异步社区微信服务号中看到本书信息及相关的服务提示。
我们的联系邮箱是contact@epubit.com.cn。
如果您对本书有任何疑问或建议，请您发邮件给我们，并请在邮件标题中注明本书书名，以便我们更高效地做出反馈。
如果您有兴趣出版图书、录制教学视频，或者参与图书技术审校等工作，可以发邮件给本书的责任编辑（liuyasi@ptpress.com.cn）。
如果您来自学校、培训机构或企业，想批量购买本书或异步社区出版的其他图书，也可以发邮件给我们。
如果您在网上发现有针对异步社区出品图书的各种形式的盗版行为，包括对图书全部或部分内容的非授权传播，请您将怀疑有侵权行为的链接通过邮件发给我们。您的这一举动是对作者权益的保护，也是我们持续为您提供有价值的内容的动力之源。
“异步社区”是人民邮电出版社旗下IT专业图书社区，致力于出版精品IT图书和相关学习产品，为作译者提供优质出版服务。异步社区创办于2015年8月，提供大量精品IT图书和电子书，以及高品质技术文章和视频课程。更多详情请访问异步社区官网https://www.epubit.com。
“异步图书”是由异步社区编辑团队策划出版的精品IT专业图书的品牌，依托于人民邮电出版社的计算机图书出版积累和专业编辑团队，相关图书在封面上印有异步图书的LOGO。异步图书的出版领域包括软件开发、大数据、AI、测试、前端、网络技术等。
异步社区
微信服务号
CSS选择器本身很简单，就是一些特定的选择符号，于是，很多开发人员就认为CSS选择器的世界很简单，没什么好学的，这样的想法严重限制了开发人员的技术提升。实际上，CSS选择器非常强大，它不仅涉及视觉表现，而且与用户安全、用户体验有非常密切的联系。
CSS选择器能够做的事情远比你预想的多得多。
不少开发人员学习JavaScript时得心应手，但是学习CSS时总是没有感觉，因为他们习惯把CSS属性或者CSS选择器看成一个个独立的个体，就好像传统编程语言中的一个个API一样。传统编程语言讲求逻辑清晰，层次分明，主要为功能服务，因此这种不拖泥带水的API是非常有必要的。但CSS是为样式服务的，它重表现，轻逻辑，如同人的思想一样，相互碰撞才能产生火花。
尤其对于CSS选择器，作为CSS世界的支柱，其作用好比人类的脊柱，与HTML结构、浏览器行为、用户行为以及整个CSS世界相互依存、相互作用，这必然会产生很多碰撞，让CSS选择器变得非常强大。
同时，CSS选择器本身也并非你想得那么单纯。
我们平常所说的CSS选择器实际上是一个统称，指的是很多基本概念的集合，在正式开始介绍本书的内容之前，我们有必要先了解一下这些基本概念。
CSS选择器可以分为4种，即选择器、选择符、伪类和伪元素。
这里的“选择器”指的就是平常使用的CSS声明块前面的标签、类名等。例如：
body { font: menu; }这里的body就是一种选择器，属于类型选择器，也可以称为标签选择器。
.container { background-color: olive; }这里的.container也是选择器，属于属性选择器，我们平时称其为类选择器。
还有很多其他种类的选择器，后面将会详细介绍。
目前我所知道的CSS选择器世界中的选择符有5种，即表示后代关系的空格（ ）、表示父子关系的箭头（>）、表示相邻兄弟关系的加号（+）、表示兄弟关系的波浪线（~），以及表示列关系的双管道（||）。
这5种选择符分别示意如下：
/* 后代关系 */
.container img { object-fit: cover; }
/* 父子关系 */
ol > li { margin: .5em 0; }
/* 相邻兄弟关系 */
button + button { margin-left: 10px; }
/* 兄弟关系 */
button ~ button { margin-left: 10px; }
/* 列 */
.col || td { background-color: skyblue; }关于选择符的更多知识参见第5章。
伪类的特征是其前面有一个冒号（:），通常与浏览器行为和用户行为相关联，可以看作CSS世界的JavaScript。伪类和选择符相互配合可以实现非常多的纯CSS交互效果。
例如：
a:hover { color: darkblue; }伪元素的特征是其前面有两个冒号（::），常见的有::before、::after、::first- letter和::first-line等。
本书不会对这些常用的伪元素做专门的介绍，读者若有兴趣可以参见《CSS世界》和《CSS新世界》的相关章节。
以前CSS选择器只有一个全局作用域，也就是在网页中任意位置的CSS都共用一个文档上下文。
如今CSS选择器是有局部作用域的概念的。伪类:scope的设计初衷就是匹配局部作用域内的元素。例如，对于下面的代码：
<section>
<style scoped>
p { color: blue; }
:scope { background-color: red; }
</style>
<p>在作用域内，背景色应该是红色。</p>
</section>
<p>在作用域外，默认背景色。</p>理论上，<section>标签里面的<p>元素的背景色应该是红色，但目前没有任何浏览器表现为红色。实际上此特性曾被浏览器支持过，但只是昙花一现，现在已经被舍弃。目前虽然伪类:scope也能解析，但只能当作全局作用域。但是，这并不表示:scope一无是处，它在JavaScript中还是有效的，这一点将在5.1.3节中进一步展开介绍。
另外，CSS选择器的局部作用域在Shadow DOM中也是有效的。例如，有一个<div>元素：
<div id="hostElement"></div>然后使用Shadow DOM为这个<div>元素创建一个<p>元素并且控制其背景色的样式，如下：
// 创建Shadow DOM
var shadow = hostElement.attachShadow({mode: 'open'});
// 给Shadow DOM添加文字
shadow.innerHTML = '<p>我是由Shadow DOM创建的 <p> 元素，我的背景色是？</p>';
// 添加CSS，p标签背景色变成黑色
shadow.innerHTML += '<style>p { background-color: #333; color: #fff; }</style>';结果如图1-1所示，Shadow DOM创建的<p>元素的背景色是黑色，而页面原本的<p>元素的背景色不受任何影响。
图1-1 页面原本的<p>元素的背景色不受任何影响
上面的CSS选择器的局部作用域示例都配有演示页面，读者可以手动输入https://demo.cssworld. cn/selector2/1/2-1.php或扫描下面的二维码体验与学习。
CSS选择器中还有一个命名空间（namespace）的概念，这里简单介绍一下。
命名空间可以让来自多个XML词汇表的元素的属性或样式彼此之间不产生冲突，它的使用非常常见，例如XHTML文档：
<html xmlns="http://www.w3.org/1999/xhtml">又如SVG文件的命名空间：
<svg xmlns="http://www.w3.org/2000/svg">上述代码中的xmlns属性值对应的URL地址就是一个简单的命名空间名称，并不指向实际的在线地址，浏览器不会使用或处理这个URL。
在CSS选择器世界中命名空间的作用也是避免冲突。例如，在HTML和SVG中都会用到<a>链接，此时就可能产生冲突，我们可以借助命名空间进行规避，具体方法是使用@namespace规则声明命名空间：
@namespace url(http://www.w3.org/1999/xhtml);
@namespace svg url(http://www.w3.org/2000/svg);
/* XHTML中的<a>元素 */
a {}
/* SVG中<a>元素 */
svg|a {}
/* 同时匹配XHTML和SVG的<a>元素 */
*|a {}注意，上述CSS代码中的svg也可以换成其他字符，这里的svg并不表示svg标签的意思。
眼见为实，我们通过一个实际案例来直观地了解一下CSS选择器的命名空间。HTML和CSS代码如下：
<p>这是文字：<a href>点击刷新</a></p>
<p>这是SVG：<svg><a xlink:href><path d="..."/></a></svg></p>
@namespace "http://www.w3.org/1999/xhtml";
@namespace svg "http://www.w3.org/2000/svg";
svg|a { color: black; fill: currentColor; }
a { color: gray; }svg|a中有一个管道符|，管道符前面的字符表示命名空间的代称，管道符后面的内容则是选择器。本例的代码表示在http://www.w3.org/2000/svg这个命名空间下所有<a>的颜色都是black，由于xhtml的命名空间也被指定了，因此SVG中的<a>就不会受标签选择器a的影响，即便纯标签选择器a的优先级再高也无效。
最终的效果如图1-2所示，文字链接颜色为灰色，SVG图标颜色为黑色。
图1-2 不同命名空间下的样式保护
眼见为实，读者可以手动输入https://demo.cssworld.cn/selector2/1/2-2.php或扫描下面的二维码体验与学习。
CSS选择器命名空间的兼容性很好，至少10年前浏览器就已支持，但是，很少见人在项目中使用它，这是为什么呢？
原因有二。其一，在HTML中直接内联SVG的应用场景并不多，它更多的是作为独立的SVG资源使用，即使内联，也很少有需要对特性SVG标签进行样式控制的需求；其二，有其他更简单的替代方案，例如，如果我们希望SVG中所有的<a>元素的颜色都是black，可以直接用：
svg a { color: black; }无须掌握复杂的命名空间语法就能实现我们想要的效果，这样做的唯一缺点就是增加了SVG中a元素的优先级，但是在大多数场景下，这对我们的实际开发没有任何影响。综合来看，这是一种性价比高很多的实现方式，几乎找不到需要使用命名空间的理由。
因此，对于CSS选择器的命名空间，我给大家的建议就是了解即可，在遇到大规模冲突场景时能想到还有这样一种解决方法就可以了。
很多CSS伪类选择器是最近几年才出现的，浏览器并不支持，浏览器会把这些选择器当作无效选择器，这是没有任何问题的。但是当这些无效的CSS选择器和浏览器支持的CSS选择器在代码中一起出现的时候，会导致整个选择器无效。举个例子，有如下CSS代码：
.example:hover,
.example:active,
.example:focus-within {
color: red;
}:hover和:active是浏览器很早就支持的两个伪类，按道理讲，所有浏览器都能识别这两个伪类，但是，由于IE浏览器并不支持:focus-within伪类，导致IE浏览器无法识别整个语句，这就是无效CSS选择器特性。
因此，我们在使用一些新的CSS选择器时，出于渐进增强的目的，需要将它们分开书写：
/* IE浏览器可识别 */
.example:hover,
.example:active {
color: red;
}
/* IE浏览器不可识别 */
.example:focus-within {
color: red;
}不过，在诸多CSS选择器中，这种无效选择器特性出现了一个例外，那就是浏览器可以识别以-webkit-私有前缀开头的伪元素。例如，下面这段CSS选择器就是无效的：
div, span::whatever {
background: gray;
}但是，如果加上一个-webkit-私有前缀，浏览器就可以识别了，<div>元素背景色为灰色，如图1-3所示：
div, span::-webkit-whatever {
background: gray;
}图1-3 div背景色为gray
除了IE浏览器，其他浏览器均支持（Firefox 63及以上版本支持）识别这个-webkit-无效伪元素的特性。于是，我们就可以灵活运用这种特性来帮助完成实际开发。例如，对IE浏览器和其他浏览器进行精准区分：
/* IE浏览器 */
.example {
background: black;
}
/* 其他浏览器 */
.example, ::-webkit-whatever {
background: gray;
}当然，上面的无效伪类导致整行选择器失效的特性也可以用来区分浏览器。
读者服务：
微信扫码关注【异步社区】微信公众号，回复“e60931”获取本书配套资源以及异步社区15天VIP会员卡，近千本电子书免费畅读。
