⑧伪类（Pseudo-class）

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伪元素用于在元素的内容后面插入生成的内容。