目 录
CSS选择器本身很简单，就是一些特定的选择符号，于是，很多开发者就认为CSS选择器的世界很简单，没什么好学的，这样的想法严重限制了开发者的技术提升。实际上，CSS选择器非常强大，它不仅涉及视觉表现，而且与用户安全、用户体验有非常密切的联系。
CSS选择器能够做的事情远比你预想的多得多。
不少开发人员学习JavaScript得心应手，但是学习CSS却总是没有感觉，因为他们还是习惯把CSS属性或者CSS选择器看成一个个独立的个体，就好像传统编程语言中的一个个API一样。传统编程语言讲求逻辑清晰，层次分明，主要为功能服务，因此这种不拖泥带水的API是非常有必要的。但CSS却是为样式服务的，它重表现，轻逻辑，如同人的思想一样，相互碰撞才能产生火花。
尤其对于CSS选择器，它作为CSS世界的支柱，其作用好比人类的脊柱，与HTML结构、浏览器行为、用户行为以及整个CSS世界相互依存、相互作用，这必然会产生很多碰撞，让CSS选择器变得非常强悍。
同时，CSS选择器本身也并非你想得那么单纯。
我们平常所说的CSS选择器实际上是一个统称，是很多基本概念的集合，在正式开始介绍本书的内容之前，我们有必要先了解一下这些基本概念。
CSS选择器可以分为4类，即选择器、选择符、伪类和伪元素。
1．选择器
这里的“选择器”指的就是平常使用的CSS声明块前面的标签、类名等。例如：
body { font: menu; }
这里的body就是一种选择器，是类型选择器，也可以称为标签选择器。
.container { background-color: olive; }
这里的.container也是选择器，属于属性选择器的一种，我们平时称其为类选择器。
还有很多其他种类的选择器，后面将会详细介绍。
2．选择符
目前我所知道的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; }
关于选择符的更多知识可以参见第4章。
3．伪类
伪类的特征是其前面会有一个冒号（:），通常与浏览器行为和用户行为相关联，可以看成是CSS世界的JavaScript。伪类和选择符相互配合可以实现非常多的纯CSS交互效果。
例如：
a:hover { color: darkblue; }
4．伪元素
伪元素的特征是其前面会有两个冒号（::），常见的有::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>