正文

一、为什么 CSS 选择器很强

传统编程语言讲求逻辑清晰，层次分明，主要为功能服务，因此这种不拖泥带水的 API 是非常有必要的。但 CSS 却是为样式服务的，它重表现，轻逻辑，如同人的思想一样，相互碰撞才能产生火花。

尤其对于 CSS 选择器，它作为 CSS 世界的支柱，其作用好比人类的脊柱，与 HTML 结构、浏览器行为、用户行为以及整个 CSS 世界相互依存、相互作用、这必然会产生很多碰撞，让 CSS 选择器变得非常强悍。

同时 CSS 选择器也并非你想的那么单纯。

二、CSS 选择器分为 4 类，即选择器、选择符、伪类和伪元素。

1. 选择器：选择器指的是平常使用的 CSS 声明块前面的标签、类名。例如：

body { font: menu; }

2. 选择符：目前所知道的 CSS 选择器世界中的选择符有 5 个，即表示后代关系的空格（ ），表示父子关系的尖括号（>），表示相邻兄弟关系的加号（+），表示兄弟关系的弯弯（~），表示列关系的（||）。

.container { background-color: olive; }

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

/** 后代关系 **/
.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. 伪元素：伪元素的特征是前面会有两个冒号（:），常见的有 ::before，::after，::first-letter，::first-line 等。

前端技术的一次小拓展，这块比较简单，不过了解了解也挺有意思，能增加深点记忆。