介绍
在本教程中,您将创建 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>
元素并为其设置样式,该元素可用于构建网页布局。