如何在CSS中使用带有状态伪类的链接和按钮

作为 Write for DOnations 计划的一部分，作者选择了 Diversity in Tech Fund 来接受捐赠。

介绍

Web 开发的一个重要部分是在用户与元素交互时提供反馈。这种交互是通过改变 state 来完成的，它指示用户如何使用或已经使用页面上的给定元素。在 CSS 中，选择器有一些特殊的变体，称为伪类，它允许状态更改来启动样式更改。

在本教程中，您将使用 :hover、:active 和 :focus 用户操作以及 :visited 位置伪类。您将使用 <a> 和 <button> 作为教程中的交互元素。这两个元素都具有相似的交互状态，并且在功能上与用户相同。从开发的角度来看，<a> 元素专门用于与 URL 交互，而 <button> 元素用于触发表单或 JavaScript 函数。除了使用这四种不同的状态之外，您还将使用 transition 属性来为这些交互状态之间的样式设置动画。

先决条件

了解 CSS 的级联和特异性特性和盒模型。
了解类型选择器、组合器选择器和选择器组。
熟悉文本布局和颜色属性。
在您的本地计算机上保存为 index.html 的空 HTML 文件，您可以从您选择的文本编辑器和 Web 浏览器访问该文件。要开始使用，请查看我们的如何设置您的 HTML 项目教程，并按照如何使用和理解 HTML 元素获取有关如何在浏览器中查看 HTML 的说明。如果您是 HTML 新手，请尝试整个如何用 HTML 构建网站系列。
一个名为 styles.css 的空 CSS 文件和一个名为 index.html 的空 HTML 文件都保存在本地计算机上的同一目录中。

设置初始 HTML 和 CSS

要开始使用链接和按钮，您将首先设置作为教程基础所需的 HTML 和 CSS。在本节中，您将编写所有必要的 HTML 和一些初始 CSS 样式，这些样式将处理布局并开始视觉美感。

首先，在文本编辑器中打开 index.html。然后，将以下突出显示的 HTML 添加到文件中：

索引.html

<!doctype html>
<html>
  <head>
  </head>
  <body>
  </body>
</html>

接下来，转到 <head> 标记并添加 <meta> 标记以定义 HTML 文件的字符集。然后设置页面的标题，添加一个 <meta> 标签来定义移动设备应该如何呈现页面，最后加载带有 <link> 标签的 CSS 文件。这些添加在以下代码块中突出显示。随着代码的添加和更改，您将在整个教程中遇到这种突出显示方法：

索引.html

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Link and Buttons with State</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
  </body>
</html>

添加 <head> 内容后，接下来移动到 <body> 元素，在该元素中添加内容以制作带有 <a> 和 <button> 标签作为交互元素的信息块。将此代码块中突出显示的部分添加到文本编辑器中的 index.html 文件中：

索引.html

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Link and Buttons with State</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <section>
      <header>
        <button class="link" type="button">
          Close Window
        </button>
      </header>
      <div>
        <p>
          This is a demo paragraph for some demo content for a tutorial. By reading this text you are now informed that this is text for the demo in <a href="https://do.co/tutorials">this tutorial</a>. This means you can agree to use this content for the demo or not. If you wish to continue with this tutorial demo content, please select the appropriately styled interactive element below.
        </p>
        <div>
          <button class="button" type="button">
            Yes, Please
          </button>
          <a class="button" href="#">
            No, Thank you
          </a>
        </div>
      </div>
    </section>
  </body>
</html>

将您的更改保存到 index.html 并打开 Web 浏览器以在其中打开 index.html 文件。页面内容将以白色背景上的黑色衬线字体显示。 <button> 元素样式将根据您的浏览器和操作系统而有所不同，但页面看起来类似于下图：

接下来，在与 index.html 文件相同的目录中创建一个名为 styles.css 的文件。代码块中的以下样式将为包含 <button> 和 <a> 元素的容器设置基本样式，您将在本教程的其余部分设置样式。将以下代码添加到您的 styles.css 文件中：

样式.css

body {
  background-color: #454545;
  color: #333;
  font-family: sans-serif;
  line-height: 1.5;
}

section {
  margin: 2rem auto;
  width: 90%;
  max-width: 50rem;
  box-sizing: border-box;
  padding: 2rem;
  border-radius: 2rem;
  border: 0.25rem solid #777;
  background-color: white;
}

header {
  text-align: right;
}

此代码块中的 CSS 为演示内容区域的三个部分添加了样式。第一个是 body 选择器，它应用深灰色背景，然后定义默认字体属性。第二个选择器专注于 <section> 元素，它是演示内容的主要容器，并创建一个带有大圆角和最大宽度的白色块，因此它只会增长到指定的数量。最后，header 元素选择器将文本对齐设置为右对齐，因此 关闭窗口 按钮位于 <section> 容器的最右上角。

如果您想了解有关如何使用 CSS 元素选择器的更多信息，请查看如何选择 HTML 元素以使用 CSS 设置样式。

保存对 styles.css 文件的更改，然后在浏览器中重新加载 index.html 文件。页面样式将从浏览器默认样式转换为自定义样式，如下图所示：

您已经设置了 HTML 并加载了页面内容的基本样式。接下来，您将创建一个自定义默认链接样式，并提供一种将该默认样式应用于 button 元素的方法。

为文本链接创建样式

在本节中，您将通过设置新颜色来创建自定义默认链接样式。然后，您将删除默认按钮样式，以使按钮看起来像默认链接。 a 和 button 有不同的用途，但网站用户以相似的方式与两者进行交互。有时，这两个元素需要看起来相似，以帮助向用户解释交互或匹配设计美学。

对于本节的第一部分，您将设置将在通用 <a> 元素和 .link 类上使用的默认链接样式，然后可以将通用链接样式应用于<button> 元素。首先创建一个组选择器，其中包含一个 a 元素选择器和一个具有 color 属性和值为 #25a 的 .link 类选择器：

样式.css

...
a,
.link {
  color: #25a;
}

将更改保存到 styles.css 并在浏览器中打开 index.html。页面上的 <a> 元素现在是比浏览器默认链接蓝色更深的蓝色。此外，带有 class="link" 的 <button> 元素在按钮中具有相同的蓝色文本。下图展示了浏览器中变化的外观：

接下来，开始删除 button 的默认外观。默认情况下，浏览器会为 <button> 元素的外观和感觉添加大量自定义，以确保它们作为交互式元素可区分。要删除浏览器添加到这些元素的额外样式，请在文本编辑器中返回 styles.css，创建一个 button 元素选择器，然后添加两个类似的属性，如以下代码块所示：

样式.css

...
a,
.link {
  color: #25a;
}

button {
  -webkit-appearance: none;
  appearance: none;
}

第一个属性是 -webkit-appearance: none;，它被称为 供应商前缀 属性。属性的 -webkit- 位置只能由基于 WebKit 浏览器引擎衍生版本的浏览器读取，例如 Safari 或 Chrome。这些浏览器的某些版本本身不支持 appearance 属性，需要 -webkit- 前缀才能工作。

供应商前缀的使用正在下降，但仍会发生。将任何供应商前缀属性放在非前缀之前很重要，以避免在支持前缀和非前缀变体的浏览器上覆盖属性。

将更改保存到 styles.css 并在浏览器中刷新 index.html。 button 元素不会丢失所有样式；相反，它将被简化为 Web 规范所期望的默认样式。下图演示了它在浏览器中的显示方式：

要删除按钮的剩余默认样式，您需要添加更多属性。在文本编辑器中返回 styles.css 文件并转到 button 选择器。接下来，您将添加属性以删除 background-color、border、margin 和 padding。然后将 button 元素、color、font 和 text-align 的属性删除为 inherit 的值页。

以下代码块演示了如何设置它：

样式.css

...
button {
  -webkit-appearance: none;
  appearance: none;
  background-color: transparent;
  border: none;
  margin: 0;
  padding: 0;
  color: inherit;
  font: inherit;
  text-align: center;
}

将这些更改保存到 styles.css 并在 Web 浏览器中刷新 index.html。两个按钮现在都失去了默认样式，关闭窗口按钮的样式更接近链接。 Yes, Please 按钮样式将在下一节中介绍。下图演示了它在浏览器中的显示方式：

要完成使 关闭窗口 按钮看起来像文本链接，请在文本编辑器中打开 styles.css。在 a, .link 组选择器下方，仅为 .link 类添加一个新的类选择器。添加一个值为 underline 的 text-decoration 属性。然后添加一个名为 cursor 的属性，它定义鼠标光标在该元素上时的显示方式，并将值设置为 pointer。 pointer 值样式光标是默认出现在链接上的手形样式：

样式.css

...
a,
.link {
...
}

.link {
  text-decoration: underline;
  cursor: pointer;
}
...

将这些更改保存到您的 styles.css 文件，然后返回浏览器并刷新 index.html。 关闭窗口 按钮现在将出现，其行为方式与通用 <a> 元素样式类似。以下动画演示了光标在 关闭窗口 按钮上移动时的变化：

在本节中，您为 <a> 元素创建了自定义默认样式，并创建了 .link 类以将链接样式应用于 <button> 元素。在下一节中，您将创建一个可应用于 <button> 和 <a> 元素的自定义、类似按钮的样式。

为按钮创建样式

接下来，您将使用类选择器创建一个自定义的类似按钮的样式，以便可以在 <button> 或 <a> 元素上使用这些样式。与在整个文本内容中使用的 <a> 元素不同，<button> 元素具有更有意的用途。这减少了为 <button> 元素创建通用样式的必要性，而是允许您始终添加 class 属性。

首先在文本编辑器中打开 styles.css。创建一个名为 .button 的新类选择器。这里的样式将重新定义在上一步中在 button 元素选择器上重置的许多属性。您将使用 color 属性为文本添加颜色，使用 background-color 属性填充形状，然后使用 border 属性提供一些定义。之后，您将为具有 border-radius 属性的按钮设置一个圆角。最后，您将使用 padding 简写在文本上方和下方留出空间，然后在左侧和右侧将该数量加倍。

以下代码块包含这些值：

样式.css

...
.button {
  color: #25a;
  background-color: #cef;
  border: 1px solid #67c;
  border-radius: 0.5rem;
  padding: 0.75rem 1.5rem;
}

保存对 styles.css 的更改并返回浏览器刷新 index.html 文件。 Yes, Please 和 No,Thank you 按钮的外观将更改以匹配属性。文本与默认的 a 样式相同的蓝色，背景为浅蓝色，边框为深蓝色。下一张图片演示了它在浏览器中的显示方式：

两个按钮的大小有明显差异。由于 No,Thank you 按钮使用 <a> 元素而不是 <button>，因此需要向 [ 添加一些附加属性X165X] 选择器来平衡这两个元素之间的默认值。

在文本编辑器中返回 styles.css 并转到 .button 类选择器。首先，添加一个 display: inline-block，这是 button 元素的默认样式。接下来，添加一个 text-decoration: none 以从 <a> 元素中删除下划线。正如您对 .link 选择器所做的那样，将 cursor: pointer 添加到选择器以在鼠标光标悬停在元素上时获取指向手形图标。最后，添加一个 vertical-align: bottom 规则。并非所有浏览器都需要最后一个属性，但它定义了元素底部在一行中的位置：

样式.css

...
.button {
  color: #25a;
  background-color: #cef;
  border: 1px solid #67c;
  border-radius: 0.5rem;
  padding: 0.75rem 1.5rem;
  display: inline-block;
  text-decoration: none;
  cursor: pointer;
  vertical-align: bottom;
}

将这些添加保存到 styles.css，然后在浏览器中刷新 index.html。这两个按钮现在在视觉外观上是等效的，并且相互借用了默认属性，因此它们被认为具有相似的交互。

在本节中，您创建了一个自定义类选择器来为 <button> 和 <a> 元素设置类似按钮的样式。接下来，当鼠标光标位于交互元素的顶部时，您将创建一个条件样式。

将 `:hover` 伪类应用于链接和按钮

现在，您将使用 :hover 伪类创建另一种样式，当光标位于元素上时显示该样式。伪类是一组特殊的条件，由冒号 (:) 和附加到选择器的条件名称定义。例如，带有悬停伪类的 a 元素选择器变为 a:hover。

在文本编辑器中打开 styles.css。在 a, .link 的组选择器下方，通过为每个选择器附加 :hover 伪类：a:hover, .link:hover，为悬停状态添加一个新选择器。然后，当光标悬停在元素上时，要进行明显的更改，添加一个值为 #b1b 的 color 属性，它是深粉色：

样式.css

...
a,
.link {
  ...
}

a:hover,
.link:hover {
  color: #b1b;
}
...

将更改保存到 styles.css 文件并在浏览器中刷新 index.html。将鼠标悬停在 this tutorial 链接或 关闭窗口 按钮上以在悬停时启动颜色更改。下图显示了当光标悬停在 this tutorial 链接上时的悬停状态。

接下来，要向 .button 元素添加悬停状态，请在文本编辑器中返回 styles.css。在 .button 类选择器下方，添加 .button:hover 选择器以创建专门用于悬停交互的样式。接下来，在选择器中，添加颜色属性，当光标在按钮上时会改变按钮的外观。将 color 属性设置为 white，然后创建一个 background-color 和一个 border-color，并将两个属性都设置为 #25a：

样式.css

...
.button {
  ...
}

.button:hover {
  color: white;
  background-color: #25a;
  border-color: #25a;
}

将这些更改保存到您的 styles.css 文件并返回浏览器以刷新 index.html 文件。现在，将鼠标光标悬停在底部的两个按钮之一上。样式从带有深蓝色文本和边框的浅蓝色背景变为带有白色文本的深蓝色背景。下图显示了当鼠标光标悬停在 Yes, Please 按钮上时的悬停样式。

在本节中，您使用了 :hover 伪类，根据位于元素顶部的光标创建对元素的样式更改。在下一节中，您将在使用键盘导航页面时将相同的概念应用于条件。

应用 `:focus` 伪类

网站访问者有时不使用鼠标或触摸屏，而是使用键盘来导航页面元素并与之交互。这通常通过使用 TAB 键来完成，该键将循环浏览页面上的交互元素。默认样式使用 outline 属性来提供元素具有焦点的视觉指示符。可以通过使用 :focus 伪类来自定义此样式，以针对这种情况应用属性值。

要开始处理页面上元素的焦点状态，请在文本编辑器中打开 styles.css 文件。从 a:hover, .link:hover 组选择器下方的新选择器开始，并带有用于焦点状态的新组选择器：a:focus, .link:focus。

自定义焦点状态最重要的部分是确保它与默认状态明显不同。在这里，您将使 :focus 伪类样式具有带有金色背景的黑色文本：

样式.css

...
a:hover,
.link:hover {
  ...
}

a:focus,
.link:focus {
  color: black;
  outline: 2px solid gold;
  background-color: gold;
}
...

在这种情况下，您将 color 属性设置为 black 并将 background-color 属性设置为 gold。您还使用了 outline 属性，它在 background-color 属性可以到达的文本边缘周围添加了一些金色。

outline 属性的工作方式类似于 border 速记属性，因为它接受宽度、样式和颜色。但是，与 border 属性不同，outline 总是围绕整个元素，不能设置到特定的一侧。此外，与 border 不同的是，outline 不会影响盒子模型；形状仅在视觉上应用，不会改变内容的流动。

将更改保存到 styles.css 并在 Web 浏览器中刷新 index.html。开始按 TAB 键，直到浏览器将焦点移到 关闭窗口 和 本教程 元素以金色背景突出显示。下图显示了 this tutorial 链接在获得焦点时在浏览器中的样子：

接下来，要将类似的自定义焦点样式应用于 .button 类元素，首先创建一个 .button:focus 类和伪类选择器。由于 .button 元素已经在使用 border，您将使用它来指示焦点，因此通过将属性设置为 none。与之前的链接一样，color 属性将设置为 black，background-color 属性将设置为 gold。最后，将 border-color 属性的值设置为 black：

样式.css

...
.button:hover {
  ...
}

.button:focus {
  outline: none;
  color: black;
  background-color: gold;
  border-color: black;
}

请务必将添加的内容保存到 styles.css，然后返回浏览器刷新 index.html 文件。同样，使用 TAB 键，循环浏览页面上的键盘可聚焦元素，直到到达 .button 元素。它们现在将以金色背景和带有黑色边框的黑色文本点亮。下图演示了 Yes, Please 按钮在获得焦点时如何出现在浏览器中：

在本节中，您使用了 :focus 伪类来创建在网站访问者使用键盘导航页面时出现的自定义样式。在下一节中，您将使用 :active 伪类来指示用户何时通过鼠标单击或按键与元素进行交互。

应用 `:active` 伪类

您将使用的下一个伪类是交互式元素的 :active 状态。活动状态是与元素交互的状态，通常通过鼠标按下或鼠标单击操作。这为访问者提供了一个明确的状态来指示成功的鼠标单击和按钮按下的机会。

要开始使用 :active 伪类，请在文本编辑器中打开 styles.css。在 a:focus, .link:focus 的组选择器块之后，添加一个带有组选择器 a:active, .link:active 的新选择器块。将 color 的值设为 #808，这将创建比 :hover 状态更深的粉红色。

请注意，某些浏览器会混合使用 :focus 伪类和 :active 伪类的样式。为了防止这种情况，您需要分别将 outline 和 background-color 属性设置为 none 和 transparent 来删除它们：

样式.css

...
a:focus,
.link:focus {
  ...
}

a:active,
.link:active {
  color: #808;
  outline: none;
  background-color: transparent;
}
...

将添加的 :active 伪类保存到 styles.css 文件中，然后在 Web 浏览器中重新加载 index.html。以下动画显示了当鼠标在 this tutorial 链接上单击时，:active 状态如何从粉红色变为深粉红色。

接下来，要将活动状态应用于 .button，请在文本编辑器中返回 styles.css。添加 .button:active 伪类选择器并应用作为 :hover 样式的深色变体的样式。对于 color 属性，使用 #ddd 将值设置为浅灰色。对于 background-color 和 border-color 属性，将值设置为深蓝色，值为 #127。以下代码块的突出显示部分演示了它是如何编写的：

样式.css

...
.button:focus {
  ...
}

.button:active {
  color: #ddd;
  background-color: #127;
  border-color: #127;
}

请务必将这些更改保存到 styles.css，然后返回浏览器刷新 index.html。将鼠标光标悬停在内容底部的两个按钮之一上，然后单击向下。悬停时，按钮将从带有蓝色文本和边框的浅蓝色背景变为带有白色文本的全蓝色按钮，然后在单击时变为带有浅灰色文本的深蓝色按钮。以下动画演示了在单击鼠标按钮时如何从 :hover 状态更改为 :active 状态：

您通过使用 :active 伪类创建了鼠标按钮按下事件的视觉指示器，以在该事件发生时更改样式。在下一节中，您将使用 :visited 伪类来提供一个指示符，指示哪些具有 href 属性的 <a> 元素访问了该链接。

应用 `:visited` 伪类

:visited 伪类与本教程之前介绍的伪类不同。在前面的伪类涉及用户与元素的主动交互的情况下，:visited 伪类表明一个元素之前被交互过。具体来说，:visited 伪类指示浏览器历史记录中存在哪个具有 href 属性的 <a>，这意味着这些链接已被访问。

要在文本链接上创建自定义的 :visited 指示器，请在文本编辑器中打开 styles.css 文件。在 a:active, .link:active 组选择器下方，添加一个针对 a:visited, .link:visted 组选择器的新组选择器。默认的 :visited 链接样式通常是紫色。出于演示的目的，:visited 颜色将为深绿色。

添加一个值为 #080 的 color 属性，如以下突出显示的代码所示：

样式.css

...
a:active,
.link:active {
  ...
}

a:visited,
.link:visited {
  color: #080;
}
...

将此更改保存到 styles.css 文件，然后在 Web 浏览器中打开 index.html。如果还没有，请继续点击本教程和不，谢谢 <a>元素链接。这两个链接的文本颜色都是深绿色，如下图所示：

现在，按钮中的绿色文本分散了 不，谢谢 按钮的用途。此外，当访问的链接再次与 :hover 或 :active 状态交互时，将保留深绿色，而不是为每个相应状态定义的颜色。

要解决这些情况，请在文本编辑器中返回 styles.css 文件。首先，通过添加 a:visited:hover, .link:visited:hover 将 a:hover, .link:hover 组选择器附加到具有活动 :hover 状态的 :visited 元素的添加场景。同样，用 a:visited:active, .link:visited:active 扩展 a:active, .link:active 选择器块。最后，.button 元素所需的已访问状态的样式应与默认状态相同。因此，.button 选择器需要成为 .button, .button:visited 的组选择器，因此访问状态看起来与默认状态相同：

样式.css

...
a:hover,
.link:hover,
a:visited:hover,
.link:visited:hover {
  color: #b1b;
}
...
a:active,
.link:active,
a:visited:active,
.link:visited:active {
  color: #808;
}

a:visited,
.link:visited {
  color: #080;
}
...
.button,
.button:visited {
  ...
}

.button:hover,
.button:visited:hover {
  color: white;
  background-color: #25a;
  border-color: #25a;
}
...

将更改保存到 styles.css 文件并在 Web 浏览器中重新加载 index.html。文本默认 :visited 链接现在显示为所需的深绿色，而按钮样式链接保留按钮外观。下图演示了它在浏览器中的显示方式。

您使用 :visited 伪类来创建特定于浏览器历史记录中出现链接的样式，向用户指示已访问的链接。本节总结了关于伪类的工作，并使用它们为给定状态定义特定样式。在本教程的最后一部分，您将使用 transition 属性在这些不同的伪类状态之间创建无缝动画。

使用 `transition` 在状态之间进行动画处理

在处理元素的状态时，状态之间的样式转换可能是突然的。 transition 属性用于将样式从一个状态混合到下一个状态并为其设置动画，以避免这种突然性。 transition 属性是结合了 transition-property、transition-duration 和 transition-timing-function 属性的简写属性。

transition-property 可以是具有在两个给定值之间计算的值的任何属性。颜色包含在其中，因为它们是数值，即使使用颜色名称也是如此。 transition-duration 属性是转换应该发生多长时间的数值。持续时间的值通常以秒表示，单位为 s，或毫秒，单位为 ms。最后，transition-timing-function 控制动画随着时间的推移如何播放，使您能够进行细微的更改以增强动画效果。

要开始使用 transition 属性，请打开 styles.css 文件并转到 a, .link 组选择器和 .button, .button:visited 组选择器。添加一个值为 all 0.5s linear 的 transition 属性。 all 是 transition-property 的值，它告诉浏览器动画所有在状态之间变化的属性。 0.5s 是 transition-duration 的值，相当于半秒；这也可以表示为 500ms。最后，linear 位置是 transition-timing-function 值，它告诉浏览器在整个持续时间内以恒定增量从一个值移动到下一个值：

样式.css

...
a,
.link {
  ...
  transition: all 0.5s linear;
}
...
.button,
.button:visited {
  ...
  transition: all 0.5s linear;
}

将更改保存到 styles.css，然后在 Web 浏览器中打开 index.html。页面加载后，开始与链接和按钮元素交互，并注意样式在不同状态之间的动画效果。下面的动画展示了按钮样式从默认状态过渡到 :hover 伪类状态：

要使动画感觉更活泼自然，请返回 styles.css 文件并调整 transition 属性值。对于 a,.link 组选择器，将持续时间从 0.5s 更改为 250ms，与之前相比，它是持续时间的一半。然后将linear定时功能值改为ease-in-out。这将创建一个动画，该动画开始缓慢，中间加速，最后减速。然后，对于 .button,.button:visited 组选择器，将持续时间更改为更快的 180ms 并将计时功能设置为与链接相同的 ease-in-out 值：

样式.css

...
a,
.link {
  ...
  transition: all 250ms ease-in-out;
}
...
.button,
.button:visited {
  ...
  transition: all 180ms ease-in-out;
}

将这些更改保存到 styles.css 文件，然后在 Web 浏览器中刷新 index.html 页面。状态之间的过渡动画仍然会动画，但现在更快，感觉也更快。对于 transition 属性，重要的是要使用这些值来找到适合设计的动画。下面的动画演示了按钮从默认状态到 :hover 状态到 :active 状态的更快转换。

您现在已经创建了状态之间的动画。 transition 属性有助于使状态之间的更改更具吸引力和乐趣。

结论

提供交互元素状态之间的明显差异是网站的宝贵资产。状态通过向交互提供视觉反馈来帮助将重要概念传达给网站的访问者。

在本教程中，您已成功使用主要状态伪类为不同的交互元素创建多种样式。您还了解到 <button> 和 <a> 元素背后有不同的用途，但在视觉上它们可以传达相似的概念。最后，您使用 transition 属性在这些状态之间提供流畅的动画，以创建更具吸引力的交互元素。在创建网站时牢记这四种状态非常重要，以便为访问者提供重要的交互式反馈。

如果您想阅读更多 CSS 教程，请尝试如何使用 CSS 设置 HTML 样式系列中的其他教程。

如何在CSS中使用带有状态伪类的链接和按钮

介绍

先决条件

设置初始 HTML 和 CSS

为文本链接创建样式

为按钮创建样式

将 :hover 伪类应用于链接和按钮

应用 :focus 伪类

应用 :active 伪类

应用 :visited 伪类

使用 transition 在状态之间进行动画处理

结论

将 `:hover` 伪类应用于链接和按钮

应用 `:focus` 伪类

应用 `:active` 伪类

应用 `:visited` 伪类

使用 `transition` 在状态之间进行动画处理