概述
CSS 选择器本身很简单,就是一些特定的选择符号,于是,很多开发者就认为 CSS 选择器的世界很简单,没什么好学的,这样的想法严重限制了开发者的技术提升。实际上,CSS 选择器非常强大,它不仅涉及视觉表现,而且与用户安全、用户体验有非常密切的联系。
# 为什么CSS选择器很强
CSS为样式服务,重表现,轻逻辑,如同人的思想一样,相互碰撞产生火花。
CSS 选择器,作为 CSS 世界的支柱,其作用好比人类的脊柱,与 HTML 结构、浏览器行为、用户行为以及整个 CSS 世界相互依存、相互作用,这必然会产生很多碰撞,让CSS选择器变得非常强悍。
# CSS 选择器世界的一些基本概念
CSS选择器是一个统称,是很多基本概念的集合。
# 选择器、选择符、伪类和伪元素
# 选择器
body {font:menu;}
.container { background-color: olive; }
2
如这里的 body
是类型选择器又称标签选择器,.container
是属性选择器的一种,平常称为类选择器。
# 选择符
CSS 选择器世界中的选择符有 5 个,即表示后代关系的空格( ),表示父子关系的尖括号(>),表示相邻兄弟关系的加号(+),表示兄弟关系的弯弯 (~),分别示意如下:
/* 后代关系 */
.container img {object-fit: cover;}
/* 父子关系 */
ol > li { margin: .5em 0; }
/* 相邻兄弟关系 */
button + button {margin-left: 10px;}
/* 兄弟关系 */
button ~ button { margin-left: 10px;}
2
3
4
5
6
7
8
# 伪类
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;
}
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
部分浏览器会有私有前缀,可利用前缀进行区分。
/* IE 浏览器*/
.example {
background: black;
}
/* 其他浏览器 */
.example, ::-webkit-whatever {
background: gray;
}
2
3
4
5
6
7
8

