🔵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选择器
https://qingshaner.com/CSS选择器/
作者
清山
发布于
2022年1月28日
许可协议