【前端老赵的CSS简明教程】6-1 CSS的伪类和伪元素

大家好，欢迎来到今天的前端课程，我是你们的前端老赵。在上一节课中，我们学习了如何使用CSS选择器选择HTML元素并应用样式。今天我们将继续探讨CSS的另一个重要主题：伪类和伪元素。

在实际的网站开发中，我们经常需要根据不同的元素状态来应用样式。例如，当用户将鼠标悬停在链接上时，我们希望链接的文本颜色变成红色。这个效果就需要使用CSS伪类。伪类是一种用于向某些选择器添加特殊效果的关键字。

除了伪类之外，我们还有伪元素，它们允许我们在元素的内容之前或之后添加样式。

CSS伪类：

让我们先来看看CSS伪类。CSS伪类用于根据元素的状态或内容为元素添加样式。以下是一些常用的CSS伪类：

• :hover：当鼠标悬停在元素上时应用样式。

• :active：当元素被激活（例如当用户点击链接时）时应用样式。

• :visited：当链接已被访问过时应用样式。

• :focus：当元素获得焦点时应用样式（例如当用户在表单字段中输入文本时）。

这些伪类可以与其他选择器结合使用，例如：

CSS

a:hover{ color: red; }

这个样式规则的意思是：当鼠标悬停在链接或段落上时，将链接或段落的文本颜色设置为红色。

CSS伪元素：

现在让我们来看看CSS伪元素。CSS伪元素用于向元素的内容前面或后面添加样式。以下是一些常用的CSS伪元素：

• ::before：在元素内容的前面插入一些内容。

• ::after&#