如何使用CSS创建伪类

来自菜鸟教程
(重定向自如何使用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> 元素并为其设置样式,该元素可用于构建网页布局。