如何使用CSS创建伪类

介绍

在本教程中，您将创建 CSS 伪类并了解如何以及为什么要使用它们。您还将练习使用 :hover 伪类，它允许我们在用户光标悬停在元素上时更改元素的样式。

伪类是仅在某些状态下激活的 CSS 类。例如，伪类 :hover 可用于在用户光标悬停在元素上时更改图像或文本元素的外观。伪类 :visited 通常用于在用户单击链接后更改链接的颜色。

在 CSS 中通过将 : 和伪类的名称附加到标签、类或 ID 选择器来声明伪类。然后，这个伪类将自动应用于分配了伪类的标记、类或 ID 的任何 HTML 内容。您不需要向 HTML 元素添加任何额外的代码来使伪类工作。

先决条件

要学习本教程，请确保您已按照本系列如何设置 CSS 和 HTML 练习项目中的前一个教程中的说明设置了必要的文件和文件夹。

使用 CSS 创建伪类

现在让我们尝试一个实践练习来探索伪类是如何工作的。首先，确保您已按照本系列前面教程如何设置 CSS 和 HTML 练习项目中的说明设置了必要的文件和文件夹。

擦除 styles.css 文件中的所有内容（如果您添加了以前教程中的内容）并将以下伪类添加到您的文档中：

样式.css

img:hover {
 border: 10px solid red;
}

在此代码片段中，您已将突出显示的伪类 :hover 添加到 <img> 标记选择器。保存文件并返回index.html文件并擦除所有内容（除了第一行代码：<link rel="stylesheet" href="css/styles.css">）。然后将以下 HTML 代码片段添加到您的 index.html 文件中：

索引.html

<img src="https://css.sammy-codes.com/images/small-profile.jpeg">

请注意，为方便起见，您从在线位置获取图像。您还可以按照我们的教程如何使用 HTML 将图像添加到您的网页中的说明指定文件路径来使用自己的图像。

保存您的 index.html 文件并将其加载到浏览器中。（有关加载 HTML 文件的说明，请访问我们的教程步骤如何在浏览器中查看脱机 HTML 文件）。

您应该会收到如下信息：

该网页现在应该显示 Sammy the Shark 的图像。尝试将光标悬停在图像上。当您的光标在图像上移动时，图像周围应出现一个 10 像素宽的实心红色边框。当您的光标与基于您添加到 styles.css 的规则的 img 元素交互时，您的浏览器会自动应用伪类 :hover。

您也可以将 :hover 伪类与文本元素一起使用。如果您想尝试将 :hover 应用于文本元素，请擦除 styles.css 文件中的所有内容并将以下伪类添加到文档中：

样式.css

p:hover {
  font-size:100px;
  color:red;
}

保存 styles.css 文件。返回index.html文件，擦除所有内容（除了第一行代码：<link rel="stylesheet" href="css/styles.css">），并添加以下代码片段：

索引.html

<p>Some text</p>

保存您的文件并将其加载到浏览器中以检查您的结果。当您将光标悬停在页面上时，您应该会收到一个带有文本“一些文本”的页面，该页面会改变颜色和大小：

结论

在本教程中，您探索了如何以及为什么使用伪类。您还尝试将它们应用于基于文本和图像的 HTML 元素。如果您遵循本教程系列的后半部分，您将使用伪类构建演示网站的页脚。

在下一个教程中，您将了解如何创建 HTML <div> 元素并为其设置样式，该元素可用于构建网页布局。