🔵CSS选择器

本文最后更新于：2024年4月25日 上午

简单选择器

🍍元素名称选择器

1
2
3
div {
  /* div元素的样式 */
}

🍍id选择器

1
2
3
#key {
  /* id="key"的样式 */
}

🍍class选择器

1
2
3
.key {
  /* class="key"的样式 */
}

🍍通用选择器

1
2
3
* {
  /* 所有元素的样式 */
}

组合器选择器

🧄后代选择器

1
2
3
div p {
  /* div中所有p的样式 */
}

🧄子选择器

1
2
3
div > p {
  /* div子代的p的样式 */
}

🧄相邻兄弟选择器

1
2
3
div + p {
  /* p上一个同辈元素是div的p的样式 */
}

🧄通用兄弟选择器

1
2
3
div ~ p {
  /* div后所有同级p的样式 */
}

伪类选择器

🍊锚伪类

:link,:visited只对a元素生效

1
2
3
4
5
6
7
a:link {
  /* 未访问的链接的样式 */
}

a:visited{
  /* 访问过的链接的样式 */
}

:hover,:active可对其他元素生效

1
2
3
4
5
6
7
div:hover, a:hover {
  /* 悬停在元素上时元素的样式 */
}

div:active, a:active {
  /* 鼠标按下元素时元素的样式 */
}

:target

1
2
3
#idName:target {
  /* 锚点跳转到的元素 */
}

🍊child类

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
div p:first-child {
  /* div下第一个p的样式 */
}

div p:last-child {
  /* div下最后一个p的样式 */
}

p:only-child {
  /* p为父元素的唯一一个子元素 */
}

div:empty {
  /* 选中无子元素的元素 */
}
1
2
3
4
5
6
7
p:first-of-type {
  /* 所有元素中的第一个p的样式 */
}

p:last-of-type {
  /* 所有元素中的最后一个p的样式 */
}

🍊nth类

1
2
3
4
5
6
7
8
9
10
11
12
13
div:nth-child(n) {
  /* 第n个子元素 */
}
:nth-last-child(n) {
  /* 倒数第n个子元素 */
}

p:nth-of-type(n) {
  /* 第n个p元素 */
}
p:nth-last-of-type(n) {
  /* 倒数第n个p元素 */
}

n可以是具体整数或odd(选中奇数)even(选中偶数)

还可以是f(n),如(3n+1)为从第一个开始每隔3个选中一个

🍊input类

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
input:checked {
  /* 选中的<input />元素 */
}
input:focus {
  /* 被光标选中的<input />元素 */
}

input:enable {
  /* 无`disable`属性的<input />元素 */
}
input:disable {
  /* 有`disable`属性的<input />元素 */
}

input:required {
  /* 有`requored`属性<input />元素 */
}
input:optional {
  /* 无`required`属性<input />元素 */
}

input:read-only {
  /* 有`readonly`属性<input />元素 */
}
input:read-write {
  /* 非`readonly`属性<input />元素 */
}

input:in-range {
  /* 输入值在有效范围内的<input />元素 */
}
input:out-of-range {
  /* 输入值不在有效范围内的<input />元素 */
}

input:valid {
  /* 输入值无效的<input />元素 */
}
input:invalid {
  /* 输入值有效的<input />元素 */
}

🍊其他

1
2
3
:not(selector) {
  /* 选择所有不满足selector的元素 */
}
1
2
3
:lang(zh) {
  /* 元素lang属性以`zh`开头的元素 */
}
1
2
3
:root {
  /* 选中根元素(<html>) */
}

伪元素选择器

使用伪元素来写装饰性元素可以提升语义化

🍐字符元素

1
2
3
4
5
6
7
8
9
10
11
12
p::first-letter {
  /* p元素的每个首字母的样式 */
  /* 并不可靠 */
}

p::first-line {
  /* p元素的第一行的元素的样式 */
}

p::selection {
  /* p元素中选中的内容的样式 */
}

🍐插入

content属性必选,默认行内元素

1
2
3
4
5
6
7
8
9
p::before {
  content: ''
  /* p元素的前面插入元素 */
}

p::after {
  content: ''
  /* p元素的后面插入元素 */
}

属性选择器

可与其他选择器组合使用

🍒使用某属性

1
2
3
img[alt] {
  /* 使用alt属性的img元素的样式 */
}

🍒属性值全匹配

1
2
3
img[alt="云"] {
  /* alt值为云的img属性的样式 */
}

🍒属性值包含狭义

1
2
3
img[alt~="云"] {
  /* 属性值含有该值的元素 */
}
1
2
3
4
5
6
<!-- 可选中 -->
<img src="url" alt="云" />
<!-- 不可选中 -->
<img src="url" alt="云朵" />
<!-- 使用空格隔开后可选中 -->
<img src="url" alt="云 朵" />

🍒属性值包含广义

1
2
3
img[alt*="云"] {
  /* 属性值含有子字符串的元素 */
}
1
2
3
4
5
6
<!-- 可选中 -->
<img src="url" alt="云" />
<!-- 可选中 -->
<img src="url" alt="云朵" />
<!-- 可选中 -->
<img src="url" alt="云 朵" />

🍒属性值开头侠义

1
2
3
img[alt|="云"] {
  /* 属性值以该值的开头元素 */
}
1
2
3
4
5
6
7
8
<!-- 可选中 -->
<img src="url" alt="云" />
<!-- 不可选中 -->
<img src="url" alt="云朵" />
<!-- 使用空格隔开后可选中 -->
<img src="url" alt="云 朵" />
<!-- 不可选中 -->
<img src="url" alt="朵 云" />

🍒属性值开头广义

1
2
3
img[alt^="云"] {
  /* 属性值以该字符串开头的元素 */
}
1
2
3
4
5
6
7
8
<!-- 可选中 -->
<img src="url" alt="云" />
<!-- 可选中 -->
<img src="url" alt="云朵" />
<!-- 可选中 -->
<img src="url" alt="云 朵" />
<!-- 不可选中 -->
<img src="url" alt="朵云" />

选择器优先级

Level: 0

浏览器默认<继承<*选择器

Level: 🥕

  • 标签选择器

Level: 🥕🥕

  • class选择器
  • 属性选择器
  • 伪类选择器

Level: 🥕🥕🥕

  • id选择器

Level: 🥕🥕🥕🥕

  • 行内样式
1
<p style="color: #f2f3f5"></p>

Level: 🥕🥕🥕🥕🥕

  • !important顶级样式
1
2
3
div {
  color: #f2f3f5 !important;
}

同级选择器越靠后等级越高

参考文档:

《CSS教程 (w3school)》

CSS > 基础
#CSS
🔵CSS选择器
https://qingshaner.com/CSS选择器/
作者
清山
发布于
2022年1月28日
许可协议