1.伪类概念
伪类（Pseudo-class）是CSS中一种用于选择元素的特殊关键字。它们用于向特定状态或条件下的元素应用样式。
在CSS中，伪类以冒号 : 开头，跟随着伪类的名称。伪类可以与选择器组合使用，以选择满足特定条件的元素。
| 伪类 | 描述 |
|---|---|
:hover | 选择鼠标悬停在元素上的状态。 |
:active | 选择被激活或点击的元素。 |
:focus | 选择获得焦点的元素，如表单字段。 |
:first-child | 选择作为其父元素的第一个子元素的元素。 |
:last-child | 选择作为其父元素的最后一个子元素的元素。 |
:nth-child(n) | 选择作为其父元素的第 n 个子元素的元素。 |
:nth-of-type(n) | 选择作为其父元素的同类型元素中的第 n 个元素。 |
1.1 :hover
1.1.1 实现鼠标悬停时改变链接颜色：
a:hover {
color: red;
}
1.1.2 实现鼠标悬停时显示提示信息：
.tooltip:hover::before {
content: attr(data-tooltip);
/* 样式设置 */
}
1.2 ::before 和 ::after
用于在元素的内容前面或后面插入生成的内容。它们可以通过CSS内容属性(content)来定义插入的内容。
- ::before伪元素用于在元素的内容前面插入生成的内容。
- ::after伪元素用于在元素的内容后面插入生成的内容。
