前端三剑客
CSS

CSS 伪类和伪元素

# CSS 伪类和伪元素

# 1. CSS 伪类（Pseudo-classes）

# 1. 语法

伪类的语法：

selector:pseudo-class { property: value; }

CSS 类也可以使用伪类：

selector.class:pseudo-class { property: value; }

# 2. 链接伪类（Anchor Pseudo-classes）

在支持 CSS 的浏览器中，链接的不同状态都可以以不同的方式显示：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
a:link { color: #000000; }   /* 未访问链接 */
a:visited { color: #00FF00; } /* 已访问链接 */
a:hover { color: #FF00FF; }   /* 鼠标移动到链接上 */
a:active { color: #0000FF; }  /* 鼠标点击时 */
</style>
</head>
<body>
<p><b><a href="/css/" target="_blank">这是一个链接</a></b></p>
<p><b>注意：</b> a:hover 必须在 a:link 和 a:visited 之后，需要严格按顺序才能看到效果。</p>
<p><b>注意：</b> a:active 必须在 a:hover 之后。</p>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

展示效果:

注意： 在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
注意： 在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。
注意： 伪类的名称不区分大小写。

# 3. 伪类和 CSS 类

伪类可以与 CSS 类配合使用：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>伪类和 CSS 类示例</title>
<style>
/* 类选择器与伪类结合使用 */
a.red:visited { color: #FF0000; }
</style>
</head>
<body>
<a class="red" href="css-syntax.html">CSS 语法</a>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14

如果在上面的例子的链接已被访问，它会显示为红色。

# 4. CSS :first-child 伪类

您可以使用 :first-child 伪类来选择父元素的第一个子元素。

注意： 在 IE8 及之前版本必须声明 <!DOCTYPE html>，这样 :first-child 才能生效。

匹配第一个 <p> 元素

在下面的例子中，选择器匹配作为任何元素的第一个子元素的 <p> 元素：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
/* 选择父元素的第一个子元素 p */
p:first-child {
    color: blue; /* 设置文本颜色为蓝色 */
}
</style>
</head>
<body>
<p>This is some text.</p>
<p>This is some text.</p>
<p><b>注意:</b>对于 :first-child 工作于 IE8 以及更早版本的浏览器, ！DOCTYPE 必须已经声明.</p>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

展示效果:

匹配所有 <p> 元素中的第一个 <i> 元素

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
/* 选择所有 p 元素中的第一个 i 元素 */
p > i:first-child {
    color: blue; /* 设置文本颜色为蓝色 */
}
</style>
</head>
<body>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
<p><b>注意:</b> 当 :first-child 作用于 IE8 以及更早版本的浏览器, ！DOCTYPE 必须已经定义.</p>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

展示效果:

匹配所有作为第一个子元素的 <p> 元素中的所有 <i> 元素

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
/* 选择作为第一个子元素的 p 元素中的所有 i 元素 */
p:first-child i {
    color: blue; /* 设置文本颜色为蓝色 */
}
</style>
</head>
<body>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
<p><b>注意:</b> 当:first-child 作用于 IE8 及更早版本的浏览器, DOCTYPE 必须已经定义.</p>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

展示效果:

# 5. 所有 CSS 伪类

以下是常见的 CSS 伪类：

伪类	作用
`:link`	选择所有未访问的链接。
`:visited`	选择所有已访问的链接。
`:hover`	选择鼠标悬停在其上的元素。
`:active`	选择被激活的元素。
`:first-child`	选择属于父元素的第一个子元素的每个元素。
`:last-child`	选择属于父元素的最后一个子元素的每个元素。
`:nth-child(n)`	选择属于父元素的第 n 个子元素的每个元素。
`:nth-last-child(n)`	选择属于父元素的倒数第 n 个子元素的每个元素。
`:only-child`	选择属于父元素的唯一子元素的每个元素。
`:focus`	选择获得焦点的元素。
`:not(selector)`	选择非指定元素/选择器的所有元素。
`:enabled`	选择所有启用的元素。
`:disabled`	选择所有禁用的元素。
`:checked`	选择每个被选中的 `<input>` 元素。
`:root`	选择文档的根元素。

# 2. CSS 伪元素（Pseudo-elements）

# 1. :first-line 伪元素

"first-line" 伪元素用于向文本的首行设置特殊样式。
在下面的例子中，浏览器会根据 "first-line" 伪元素中的样式对 p 元素的第一行文本进行格式化：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
/* 设置段落第一行的样式 */
p:first-line {
    color: #ff0000; /* 设置文本颜色为红色 */
    font-variant: small-caps; /* 设置字体变体为小型大写字母 */
}
</style>
</head>
<body>
<p>你可以使用 "first-line" 伪元素向文本的首行设置特殊样式。</p>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

展示效果:

注意： "first-line" 伪元素只能用于块级元素。

注意： 下面的属性可应用于 "first-line" 伪元素：

font properties
color properties
background properties
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
clear

# 2. :first-letter 伪元素

"first-letter" 伪元素用于向文本的首字母设置特殊样式：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf

-8">
<title>菜鸟教程(runoob.com)</title>
<style>
/* 设置段落首字母的样式 */
p:first-letter {
    color: #ff0000; /* 设置文本颜色为红色 */
    font-size: xx-large; /* 设置文本大小为特大号 */
}
</style>
</head>
<body>
<p>你可以使用 "first-letter" 伪元素向文本的首字母设置特殊样式：</p>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

展示效果:

注意： "first-letter" 伪元素只能用于块级元素。

注意： 下面的属性可应用于 "first-letter" 伪元素：

font properties
color properties
background properties
margin properties
padding properties
border properties
text-decoration
vertical-align (only if "float" is "none")
text-transform
line-height
float
clear

# 3. 伪元素和 CSS 类

伪元素可以结合 CSS 类使用：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>伪元素和 CSS 类示例</title>
<style>
/* 设置类选择器与伪元素 */
p.article:first-letter {
    color: #ff0000; /* 设置文本颜色为红色 */
}
</style>
</head>
<body>
<p class="article">文章段落</p>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# 4. 多个伪元素

可以结合多个伪元素来使用。在下面的例子中，段落的第一个字母将显示为红色，其字体大小为 xx-large。第一行中的其余文本将为蓝色，并以小型大写字母显示。段落中的其余文本将以默认字体大小和颜色来显示：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
/* 设置段落首字母的样式 */
p:first-letter {
    color: #ff0000; /* 设置文本颜色为红色 */
    font-size: xx-large; /* 设置文本大小为特大号 */
}
/* 设置段落第一行的样式 */
p:first-line {
    color: #0000ff; /* 设置文本颜色为蓝色 */
    font-variant: small-caps; /* 设置字体变体为小型大写字母 */
}
</style>
</head>
<body>
<p>你可以结合使用 "first-line" 和 "first-letter" 伪元素向文本的首行和首字母设置特殊样式。</p>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

展示效果:

# 5. CSS - :before 伪元素

":before" 伪元素可以在元素的内容前面插入新内容。下面的例子在每个 <h1> 元素前面插入一幅图片：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
/* 在 h1 元素前插入内容 */
h1:before {
    content: url(https://web-183.oss-cn-beijing.aliyuncs.com/typora/202407170304543.png); /* 插入图片 */
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>The :before pseudo-element inserts content before an element.</p>
<h1>This is a heading</h1>
<p><b>注意:</b> 仅当 !DOCTYPE 已经声明时 IE8 支持这个内容属性</p>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

展示效果:

# 6. CSS - :after 伪元素

":after" 伪元素可以在元素的内容之后插入新内容。下面的例子在每个 <h1> 元素后面插入一幅图片：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
/* 在 h1 元素后插入内容 */
h1:after {
    content: url(https://web-183.oss-cn-beijing.aliyuncs.com/typora/202407170304543.png); /* 插入图片 */
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>The :after pseudo-element inserts content after an element.</p>
<h1>This is a heading</h1>
<p><b>注意:</b> 仅当 !DOCTYPE 已经声明时 IE8 支持这个内容属性.</p>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

展示效果:

# 7. 所有 CSS 伪类/元素

以下是常见的 CSS 伪类和伪元素：

编辑此页

上次更新: 2025/01/25, 22:32:05

← CSS 内容溢出和滚动条 CSS 表单样式设置→