【前端老赵的CSS简明教程】6-1 CSS的伪类和伪元素
大家好，欢迎来到今天的前端课程，我是你们的前端老赵。在上一节课中，我们学习了如何使用CSS选择器选择HTML元素并应用样式。今天我们将继续探讨CSS的另一个重要主题：伪类和伪元素。
在实际的网站开发中，我们经常需要根据不同的元素状态来应用样式。例如，当用户将鼠标悬停在链接上时，我们希望链接的文本颜色变成红色。这个效果就需要使用CSS伪类。伪类是一种用于向某些选择器添加特殊效果的关键字。
除了伪类之外，我们还有伪元素，它们允许我们在元素的内容之前或之后添加样式。
CSS伪类：
让我们先来看看CSS伪类。CSS伪类用于根据元素的状态或内容为元素添加样式。以下是一些常用的CSS伪类：
• :hover：当鼠标悬停在元素上时应用样式。
• :active：当元素被激活（例如当用户点击链接时）时应用样式。
• :visited：当链接已被访问过时应用样式。
• :focus：当元素获得焦点时应用样式（例如当用户在表单字段中输入文本时）。
这些伪类可以与其他选择器结合使用，例如：
a:hover{ color: red; }这个样式规则的意思是：当鼠标悬停在链接或段落上时，将链接或段落的文本颜色设置为红色。
CSS伪元素：
现在让我们来看看CSS伪元素。CSS伪元素用于向元素的内容前面或后面添加样式。以下是一些常用的CSS伪元素：
• ::before：在元素内容的前面插入一些内容。
• ::after：在元素内容的后面插入一些内容。
• ::first-letter：选择元素内容的第一个字母并应用样式。
• ::first-line：选择元素内容的第一行并应用样式。
例如，如果你想在所有段落的开头添加一个引号，请使用以下代码：
p::before{ content: '"'; }这个样式规则的意思是：在所有<p>元素的内容前面插入一个双引号。
CSS伪元素还有一个非常有用的功能，就是可以用来清除浮动。我们可以在包含浮动元素的父元素上使用::after伪元素，为其添加content: ""和display: table属性，从而清除浮动。
以下是一个例子：
.container::after{ content: ""; display: table; clear: both; }这个样式规则的意思是：在.container元素的内容后面插入一个空的伪元素，并将其显示类型设置为表格，然后清除浮动。
使用CSS伪类和伪元素实现动态效果
接下来，我们看一下如何使用CSS伪类和伪元素实现动态效果。
如果我们想要在不同的状态下为元素应用不同的样式，该怎么办呢？
我们先用CSS伪类来实现动态效果
例如，当用户将鼠标悬停在链接上时，我们可以为链接添加不同的背景色、文字颜色等样式。这个效果可以通过:hover伪类来实现。接下来，我们看一下如何为链接添加悬停效果的样式：
a:hover{ background-color: #ff0000; color: #ffffff; }上面的代码中，我们使用了:hover伪类来为鼠标悬停在链接上的状态添加样式。其中，background-color属性用于设置背景颜色，color属性用于设置文字颜色。
除了:hover伪类外，CSS还有其他很多伪类可以用于实现不同的效果，例如:focus、:active、:checked等。这些伪类的使用方法与:hover伪类类似。
focus伪类 它可以在用户选中一个表单元素时触发样式效果。比如我们可以让一个文本输入框在被选中时添加一个描边效果：
input:focus{ outline: 2px solid blue; }:active伪类 它可以在用户点击一个元素时触发样式效果。比如我们可以让一个按钮在被点击时变换背景颜色：
button:active{ background-color: green; }:nth-child伪类 它可以选择一个元素的特定子元素。:nth-child的参数可以是一个数字，也可以是一个表达式。比如我们可以选择一个表格的偶数行并将它们的背景颜色变为浅灰色：
tr:nth-child(even) { background-color: #f2f2f2; }接下来，让我们来看看如何使用CSS伪元素来实现动态效果。
在这里，我们将通过一个例子来演示如何使用CSS伪元素实现动态效果。在这个例子中，我们将为按钮添加一个“loading”的动画效果。
上面的代码中，我们为按钮添加了:before伪元素，并为其设置了一个loading动画。
其中，position: relative属性用于将按钮设置为相对定位，overflow: hidden属性用于隐藏伪元素的溢出部分，transition属性用于设置按钮的过渡效果。content: ""属性用于为伪元素添加空内容，position: absolute属性用于将伪元素设置为绝对定位。
@keyframes是CSS3中的定义动画的方式，我们先把它理解为一个独立的动画标识。
最后我们生成动态的效果如下：
在今天的课程中，我们学习了CSS伪类和伪元素实现动态效果的基本方法。通过运用好伪类和伪元素，我们可以用简单的css代码实现动态的页面效果，请大家一定要牢牢掌握，请大家按照以上示例自行练习，
感谢收看，我们下节课再见。
评论列表
写得非常好，让我受益匪浅，感谢老师的分享和耐心指导！
发表评论