选择器是 CSS 规则的一部分，位于 CSS 声明块前。

它是元素和其他部分组合起来告诉浏览器哪个 HTML 元素应当是被选为应用规则中的 CSS 属性值的方式。

image.png

类型（标签）、类和 ID 选择器

1
2
3
4
5
6
7
8
9
a {
  text-decoration: none;
}
.box {
  border: 1px solid #3af;
}
#name {
  border-radius: 4px;
}

标签属性选择器

1
2
3
4
5
6
7
a[title] {
  color: #3af;
}
/* 地址以 vikiboss.top 结尾的链接，不区分大小写 */
a[href$='vikiboss.top' i] {
  color: red;
}

伪类、伪元素选择器

伪类选择器：指定要选择的元素的特殊状态。

1
2
3
a:hover {
  color: #3af;
}

常见伪类：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
/*
常用于 a 链接的几个伪类，使用顺序不能乱
记为 LVHA（love -> hate，由爱生恨）
*/
a:link
a:visited
a:hover
a:active

/* 选中一个 div 类型的元素，并且要求该元素的状态为：在兄弟元素里是第一个元素，last 类似 */
div:first-child
/* 选中一个 div 类型的元素，并且要求该元素的状态为：在兄弟元素里是第一个 div 类型的元素，last 类似 */
div:first-of-type
/* 选中一个 div 类型的元素，并且要求该元素的状态为：在兄弟元素里是唯一的元素 */
div:only-child
/* 选中一个 div 类型的元素，并且要求该元素的状态为：在兄弟元素里是唯一的 div 类型的元素 */
div:only-of-type


/* 选中一个 div 类型的元素，并且要求该元素的状态为：不包含 .not 类 */
div:not(.not)
/* 选中一个 div 类型的元素，并且要求该元素的状态为：在兄弟元素里是第二个元素 */
div:nth-child(2)
/* 选中多个 div 类型的元素，并且要求该元素的状态为：在兄弟元素里是第1、3、5... 个元素，其他规律的类似，奇数 odd，偶数 even */
div:nth-child(2n+1)
div:nth-child(even)

/*
:nth-of-type(an+b) 与 nth-child 类似，只不过 type 要求类型
:nth-last-child(an+b) 与 nth-child 类似，只不过从后开始计数
*/

/* 选中带有 lang 属性，且值为 python 的元素 */
span:lang(python)
/* 选中元素所在文档的根元素 */
div:root
/* 选中没有子元素的元素 */
div:empty
/* 选中被选中的单选框或复选框 */
input:checked
/* 选中启用的单选框或复选框 */
input:enabled
/* 选中禁用的单选框或复选框 */
input:disabled
/* 选中指定了 max 与 min 值的编辑框的值在范围内的元素 */
input:in-range
/* 选中指定了 max 与 min 值的编辑框的值在范围外的元素 */
input:out-of-range
/* 选中表单元素中无效值的元素 */
input:invalid
/* 选中表单元素中有效值的元素 */
input:valid
/* 选中获得焦点的元素 */
input:focus

所有伪类参考：标准伪类索引 - MDN

伪元素选择器：允许对被选择元素的特定部分修改样式，不能匹配任何真实存在的 html 元素，选中的都是虚拟元素。

1
2
3
4
h2::before {
  content: '#';
  color: #3af;
}

常见伪元素：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/*
创建一个伪元素，作为已选中元素的第一个子元素，after 是最后一个。
通常配合 content 属性来添加装饰内容，这个虚拟元素默认是行内元素。
*/
div::before
div::after

/* 选中块级元素第一行第一个字母，所处行前无其他内容（图片表格等） */
div::first-letter
/* 选中块级元素的第一行，取决于元素宽度，文档宽度和文字大小等 */
div::first-line
/* 选中文档中被用户高亮的部分 */
div::selection
/* 实验性功能，选中表单元素的占位文本 */
div::placeholder

所有伪元素参考：标准伪元素索引 - MDN

后代、子代选择器

后代选择器：选中所有后代元素（直接与间接）

1
2
3
4
5
6
7
8
9
li {
  /* 一级列表采用实心圆风格 */
  list-style-type: disc;
}
/* 后代选择器 */
li li {
  /* 所有二级及更多层的列表将会换为空心圆风格 */
  list-style-type: circle;
}

子代选择器：选中所有直接后代元素

1
2
3
4
5
6
7
8
9
10
11
12
<style>
  span {
    background-color: white;
  }
  div > span {
    background-color: orange;
  }
</style>
<div>
  <span>我是橙色背景 <span>我是白色背景</span> </span><span>我是橙色背景</span>
</div>
<span>我也是白色背景</span>

相邻、通用兄弟选择器

相邻兄弟选择器：同一层级紧挨着的元素被选中

1
2
3
4
/* 图片后面紧跟着的段落将被选中 */
img + p {
  font-style: bold;
}

通用兄弟选择器：同一层级后面的所有元素都会被选中

1
2
3
4
/* p 之后，同一层级的所有 span 标签都会被选中 */
p ~ span {
  color: red;
}

通配选择器

1
2
3
4
5
/* 选择所有元素 */
* {
  margin: 0;
  padding: 0;
}

image.png