CSS伪类和伪元素的使用

伪类

伪类: 一个伪类是我们可以为了增加CSS选择一个关键字定义一个特殊状态的属于HTML元素。我们可以使用冒号语法 将伪类添加到CSS选择器,:如下所示:a:hover{ … } 。

属性 描述 CSS
:active 向被激活的元素添加样式。 1
:focus 向拥有键盘输入焦点的元素添加样式。 2
:hover 当鼠标悬浮在元素上方时,向元素添加样式。 1
:link 向未被访问的链接添加样式。 1
:visited 向已被访问的链接添加样式。 1
:first-child 向元素的第一个子元素添加样式。 2
:lang 向带有指定 lang 属性的元素添加样式。 2
:nth-child(2n) 向元素的偶数元素添加样式

a标记的伪类选择器

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
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/* 超链接为访问时的状态 */
a:link{
color: red;
text-decoration: none;
}
a{
font-size: 300px;
}
/* 设置超链接访问过的网址状态 */
a:visited{
color: black;

}
/*设置超链接鼠标悬停时候的样式 */
a:hover{
text-shadow: 5px 5px 5px #FF0000;
}
/* 设置超链接单机未释放时候的样子 */
a:active{
color: lawngreen;
}
</style>
</head>
<body>
<a href="http://www.baidu.com">百度一下</a>
</body>
</html>

伪元素

伪元素: css的伪元素,之所以被称为伪元素,是因为他们不是真正的页面元素,html没有对应的元素,但是其所有用法和表现行为与真正的页面元素一样,可以对其使用诸如页面元素一样的css样式,表面上看上去貌似是页面的某些元素来展现,实际上是css样式展现的行为,因此被称为伪元素。

属性 描述 CSS
:first-letter 向文本的第一个字母添加特殊样式。 1
:first-line 向文本的首行添加特殊样式。 1
:before 在元素之前添加内容。 2
:after 在元素之后添加内容。 2

用于文本的

:first-line 伪元素

可以通过这个属性设置文本第一行的特殊效果,比如一段文字的第一行为红色,其他为黑色。

如果不通过这个方式来实现,就比较麻烦。因为屏幕适配的原因,你可能不能确定哪些文字属于第一行

:first-letter 伪元素

和first-line 相似,这个只是设置第一个字符的特殊效果。比如第一个字的字体比别的大

如果不通过这个方式实现,那么就可能还要处理对齐,这种实现方式更方便

:before 和 :after伪元素使用

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
<title>伪类</title>
<style type="text/css">
p{
width: fit-content; /* p标签的宽度随着文字内容长短而变化 */
}
p::before{
content: ''; /* 内容为空 */
height: 3px;
background-color: yellow;
display: block;
}
p::after{
content: '';
height: 3px;
background-color: red;
display: block;
}
</style>
</head>

<body>

<p>文本文字</p>

</body>
</html>