CSS - 伪类 :active 属性_CSS 菜鸟教程

当用户激活元素时，CSS 中的 ：active 伪类就会起作用。因此，它代表激活时的一个元素，例如按钮。

：active pseudo-class 主要用于：

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

<< CSS - 伪类 :placeholder-shown CSS - 伪类 :any-link >>