1.2.1 选择器、选择符、伪类和伪元素

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; }

关于选择符的更多知识参见第5章。

3．伪类

伪类的特征是其前面有一个冒号（:），通常与浏览器行为和用户行为相关联，可以看作CSS世界的JavaScript。伪类和选择符相互配合可以实现非常多的纯CSS交互效果。

例如：

a:hover { color: darkblue; }

4．伪元素

伪元素的特征是其前面有两个冒号（::），常见的有::before、::after、::first- letter和::first-line等。

本书不会对这些常用的伪元素做专门的介绍，读者若有兴趣可以参见《CSS世界》和《CSS新世界》的相关章节。