CSS - 伪类

:active当用户激活元素时，CSS 中的伪类就会发挥作用。因此，它表示激活时的元素，例如按钮。

:active 伪类主要用于:

  • 元素，例如 <a> 和 <button>。

  • 放置在激活元素内的元素。

  • 表单的元素，通过关联的 <label> 激活。

您必须将 :active 规则放在由 LVHA-order 定义的所有其他链接相关规则之后，即:链接-:已访问-:悬停活动。这很重要，因为 :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 例子 - link</h3>
      <p>这一段包含我，一个链接，<a href="#">看到我被点击时的颜色变化</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 例子 - button</h3>
      </div>   
         <button>点击这里</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 例子 - form</h3>
      <form>
         <label for="my-button">Name: </label>
         <input id="name"/>
         <button id="my-button" type="button">点击这里</button>
       </form>
</body>
</html>