CSS 中的 :active 伪类
cssweb developmentfront end technology更新于 2024/7/11 22:04:17
伪类 用于显示元素或 CSS 选择器的不同状态。Active 伪类用于显示元素处于活动状态。
此伪类通常与链接、按钮或任何其他可活动的元素关联。
例如，如果它与链接关联，则表示链接处于活动状态。
语法
a:active { color:green;}
让我们来看看 :active 伪类 在不同场景下的实际用法，如下所示 −
示例
<html>
<head>
<style>
a:active { color:green;}
</style>
</head>
<body>
<a href="https://www.tutorialspoint.com></a>
</body>
</html>
说明
首次看到链接时，它将显示正常的链接颜色(蓝色)，如果此链接已被访问过一次，则链接将变为绿色。
示例
<html>
<head>
<style>
a:active {font-size:20px;}
</style>
</head>
<body>
<a href="https://www.tutorialspoint.com></a> 点击此处了解</body>
</html>
说明
点击链接时，此操作会将链接的字体大小更改为 20px。
示例
<html>
<head>
<style>
body:active {
background: seagreen;
}
</style>
</head>
<body>
<div>点击此窗口任意位置</div>
</body>
</html>
说明
点击屏幕上任意位置时，背景颜色将变为海绿色。
示例
<html>
<head>
<style>
#thisButton:active { color: red}
</style>
</head>
<body>
<button id="thisButton">点击我!!</button>
</body>
</html>
说明
点击按钮时，按钮文本的字体颜色将变为红色。
浏览器兼容性
| Chrome | Firefox | Edge | IE | Safari | Opera |
| 1 | 1 | Yes | 4 | 1 | 5 |
相关文章
有用资源
css 参考教程 - 该教程包含有关 css 的更多信息:https://www.cainiaomax.com/css/
