CSS 中 focus 和 active 有什么区别？

focus 和 active 是 CSS 中的两种不同的伪类，它们代表了元素的不同状态：

:focus

• :focus 伪类在用户点击或通过键盘（例如Tab键）将焦点移动到一个元素时应用。通常用于表单输入（如<input>、<textarea>等），当元素成为焦点时，focus 状态被激活。
• 例如，当用户点击一个输入框并准备输入文本时，这个输入框就处于 :focus 状态。
• :focus 状态通常用于提高可用性和用户体验，通过改变元素的样式来提示用户当前交互的元素。
• CSS 代码示例：

  css
  input:focus {
    border: 2px solid blue;
  }

  这段代码意味着当输入框获得焦点时，其边框会变成2像素宽，颜色为蓝色。

:active

• :active 伪类在用户点击一个元素并且在松开鼠标按钮之前应用。它表示元素正在被激活或点击。
• 例如，当用户按下一个按钮时，在鼠标按钮按下的过程中，按钮就处于 :active 状态。
• 与 :focus 不同，active 状态通常非常短暂，它只在用户与元素交互的那一刻存在。
• CSS 代码示例：

  css
  button:active {
    background-color: red;
  }

  这段代码意味着当按钮被点击时，背景颜色变为红色。

使用场景举例

假设你有一个提交表单的按钮。当用户通过键盘导航到这个按钮并准备点击它时，按钮可能出现一个轮廓或阴影，提示用户它已获得焦点（:focus）。当用户真正点击按钮并按下时（在鼠标键松开之前），按钮的颜色可能会变深或出现内凹效果，表示它处于激活状态（:active）。

这两种状态可以结合使用，以向用户提供视觉反馈，增强用户界面的交互性。例如，一个按钮可能同时定义了 :focus 和 :active 伪类：

css
button:focus {
  outline: none;
  box-shadow: 0 0 5px rgba(81, 203, 238, 1);
}

button:active {
  transform: translateY(2px);
}

在这个例子中，当按钮获得焦点时，它会显示一个蓝色的光晕作为轮廓，并且当按钮被激活或点击时，它会向下移动2像素，给用户一种按压的视觉效果。

:focus和 :active是两个不同的状态。

• :focus表示当前选择元素接收输入时的状态
• :active表示元素当前被用户激活时的状态。

例如，假设我们有一个 <button>.<button>开始时不会有任何状态。它只是存在。如果我们过去Tab给 提供“焦点” <button>，它现在就进入其 :focus状态。如果您随后单击（或按space），则按钮将进入 ( :active) 状态。

需要注意的是，当您单击一个元素时，您会给予它焦点，这也会产生 :focus和 :active是相同的错觉。**他们不一样。**单击时按钮处于 :focus:active状态。

一个例子：

shell
<style type="text/css">
  button { font-weight: normal; color: black; }
  button:focus { color: red; }
  button:active { font-weight: bold; }
</style>
  
<button>
  When clicked, my text turns red AND bold!<br />
  But not when focused only,<br />
 where my text just turns red
</button>

:active Adds a style to an element that is activated :focus Adds a style to an element that has keyboard input focus :hover Adds a style to an element when you mouse over it :lang Adds a style to an element with a specific lang attribute :link Adds a style to an unvisited link :visited Adds a style to a visited link

来源：CSS 伪类

有四种情况。

1. 默认情况下，活动和焦点均处于关闭状态。
2. 当您按_Tab 键_循环浏览可_聚焦元素_时，它们将进入:focus（不处于活动状态）。
3. 当您_单击__不可聚焦的元素_时，它会进入:active（没有焦点）。
4. 当您_单击__可聚焦元素_时，它会进入:active:focus（同时活动和聚焦）。

例子：

shell
<div>
  I cannot be focused.
</div>

<div tabindex="0">
  I am focusable.
</div>

---

shell
div:focus {
  background: green;
}

div:active {
  color: orange;
}

div:focus:active {
  font-weight: bold;
}

页面加载时，两者都属于情况 1。当您按 Tab 键时，您将聚焦第二个 div 并看到它展示情况 2。当您单击第一个 div 时，您会看到情况 3。当您单击第二个 div 时，您会看到情况 4 。

---

元素是否可聚焦是另一个问题。大多数都不是默认的。但是，可以安全地假设<a>, <input>,<textarea>默认情况下是可聚焦的。

:focus 是指元素能够接受输入 - 输入框中的光标或已切换到的链接。

:active 是指用户激活元素的时间 - 用户按下鼠标按钮然后释放鼠标之间的时间。

活动是当用户激活该点时（例如鼠标单击，如果我们在字段到字段之间使用选项卡，则没有活动样式的迹象。也许单击需要更多时间，只需尝试按住单击该点），焦点发生在之后该点被激活。尝试这个 ：

shell
<style type="text/css">
  input { font-weight: normal; color: black; }
  input:focus { color: green; outline: 1px solid green; }
  input:active { color: red; outline: 1px solid red; }
</style>

<input type="text"/>
<input type="text"/>