HTML 中 :focus 和 :active 选择器的区别


:focus

:focus 选择器用于在表单元素获得焦点时应用所需的样式,如按钮、链接、输入框。可以使用鼠标或 Tab 键使元素获得焦点。焦点的持续时间从让元素获得焦点直到另一个元素获得焦点时结束。

:active

: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>

输出

更新于: 2021 年 12 月 21 日

687 查看

开启您的职业

获得认证,完成课程

立即开始
广告
© . All rights reserved.