CSS 选择器本身很简单，就是一些特定的选择符号，于是，很多开发者就认为 CSS 选择器的世界很简单，没什么好学的，这样的想法严重限制了开发者的技术提升。实际上，CSS 选择器非常强大，它不仅涉及视觉表现，而且与用户安全、用户体验有非常密切的联系。

为什么CSS选择器很强

CSS为样式服务，重表现，轻逻辑，如同人的思想一样，相互碰撞产生火花。

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

CSS 选择器世界的一些基本概念

CSS选择器是一个统称，是很多基本概念的集合。

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

选择器

body {font:menu;}
.container { background-color: olive; }

如这里的 body是类型选择器又称标签选择器，.container是属性选择器的一种，平常称为类选择器。

选择符

CSS 选择器世界中的选择符有 5 个，即表示后代关系的空格( )，表示父子关系的尖括号(>)，表示相邻兄弟关系的加号(+)，表示兄弟关系的弯弯 (~),分别示意如下:

/* 后代关系 */
.container img {object-fit: cover;} 
/* 父子关系 */
ol > li { margin: .5em 0; }
/* 相邻兄弟关系 */
button + button  {margin-left: 10px;} 
/* 兄弟关系 */
button ~ button { margin-left: 10px;}

伪类

a:hover {color:#FFF;}

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

伪元素

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

CSS选择器的作用域

以前的CSS选择器只有一个全局作用域，如今的CSS选择器是有局部作用域的概念的。

伪类:scope 的设计初衷就是匹配局部作用域，但现已被舍弃。

CSS选择器的命名空间

CSS 选择器中有一个命名空间 (namespace) 的概念，但不常用。利用提高选择器优先级同样可以实现。

无效CSS选择器特性与实际使用

有些CSS伪类选择器对于老浏览器支持不佳，浏览器会把这些选择器当无效选择器，写的时候分开写可避免兼容性问题.

.example:hover，
.example:active,
.example:focus-within {
    color: red;
}
/*改为=>*/

/* IE 浏览器可识别 */
.example:hover,
.example:active {
    color: red;
}
/* IE 浏览器不可识别 */
.example:focus-within {
    color: red;
}

部分浏览器会有私有前缀，可利用前缀进行区分。

/* IE 浏览器*/
.example {
    background: black;
}
/* 其他浏览器 */
.example, ::-webkit-whatever {
    background: gray;
}