HTML中的：focus和：active选择器之间的区别

Z时代
2024-01-10
分类：综合

：焦点

：focus选择器用于在表单元素（例如按钮，链接，输入框）获得焦点时应用所需的样式。元素可以使用鼠标或Tab键获得焦点。焦点一直停留在元素上，直到另一个元素获得焦点。

：活性

：active选择器用于指示锚标记处于活动状态或按钮处于活动状态。当鼠标按下时，活动选择器将应用并保持应用状态，直到鼠标按下。

示例

在示例之后，显示了：focus以及按钮和链接上的：active选择器的用法。

<!DOCTYPE html>
<html>
<head>
   <title>Selector Example</title>
   <style>
      button {
         border: 2px solid black;
      }
      button:focus {
         border: 2px dotted red;
      }
      a {
         color: black;
      }
      a:active {
         color: red;
      }
   </style>
</head>
<body>
   <button type="submit">Focus Me</button>
   <a href="#">Active Me</a>
</body>
</html>