CSS - :active伪类属性

CSS 中的:active伪类在用户激活元素时生效。因此，它表示激活状态下的元素，例如按钮。

:active伪类主要用于

诸如<a>和<button>之类的元素。
位于已激活元素内的元素。
通过关联的<label>激活的表单元素。

必须将:active规则放在所有其他链接相关规则之后，这些规则由 LVHA 顺序定义，即:link-:visited-:hover-:active。这很重要，因为:active指定的样式会被后续的链接相关伪类（如:link, :hover或:visited）覆盖。

语法

selector:active {
   /* ... */
}

CSS :active 示例

这是一个更改链接前景和背景颜色的示例

<html>
<head>
<style>
   div {
      padding: 1rem;
   }
   a {
      background-color: rgb(238, 135, 9);
      font-size: 1rem;
      padding: 5px;
   }
   a:active {
      background-color: lightpink;
      color: darkblue;
   }
   p:active {
      background-color: lightgray;
   }
</style>
</head>
<body>
   <div>
      <h3>:active example - link</h3>
      <p>This paragraph contains me, a link, <a href="#">see the color change when I am clicked!!!</a></p>
   </div>
</body>
</html>

这是一个更改按钮激活时的边框、前景和背景颜色的示例

<html>
<head>
<style>
   div {
      padding: 1rem;
   }
   button {
      background-color: greenyellow;
      font-size: large;
   }
   button:active {
      background-color: gold;
      color: red;
      border: 5px inset grey;
   }
</style>
</head>
<body>
      <h3>:active example - button</h3>
      </div>   
         <button>Click on me!!!</button>
      </div>
</body>
</html>

这是一个使用:active伪类激活表单元素的示例

<html>
<head>
<style>
   form {
      border: 2px solid black;
      margin: 10px;
      padding: 5px;
   }
   form:active {
      color: red;
      background-color: aquamarine;
   }

   form button {
      background: black;
      color: white;
   }
</style>
</head>
<body>
      <h3>:active example - form</h3>
      <form>
         <label for="my-button">Name: </label>
         <input id="name"/>
         <button id="my-button" type="button">Click Me!</button>
       </form>
</body>
</html>

打印页面