大家好,欢迎来到今天的前端课程,我是你们的前端老赵。在上一节课中,我们学习了如何使用CSS选择器选择HTML元素并应用样式。今天我们将继续探讨CSS的另一个重要主题:伪类和伪元素。
在实际的网站开发中,我们经常需要根据不同的元素状态来应用样式。例如,当用户将鼠标悬停在链接上时,我们希望链接的文本颜色变成红色。这个效果就需要使用CSS伪类。伪类是一种用于向某些选择器添加特殊效果的关键字。
除了伪类之外,我们还有伪元素,它们允许我们在元素的内容之前或之后添加样式。
CSS伪类:
让我们先来看看CSS伪类。CSS伪类用于根据元素的状态或内容为元素添加样式。以下是一些常用的CSS伪类:
• :hover:当鼠标悬停在元素上时应用样式。
• :active:当元素被激活(例如当用户点击链接时)时应用样式。
• :visited:当链接已被访问过时应用样式。
• :focus:当元素获得焦点时应用样式(例如当用户在表单字段中输入文本时)。
这些伪类可以与其他选择器结合使用,例如:
CSS
a:hover{ color: red; }
这个样式规则的意思是:当鼠标悬停在链接或段落上时