217. 【CSS-选择器世界】CSS-选择器的分类-CSDN博客

本文链接：https://blog.csdn.net/qq_36073886/article/details/129191654

一、为什么 CSS 选择器很强

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

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

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

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

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

img{
      width: 100%;
      }
      body { font: menu; }

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

.container { background-color: olive; }

伪类：伪类的特征是前面会有一个冒号（:），通常与浏览器行为和用户行为相关联，可以看成是 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; }