css:active是CSS伪类选择器的一种，用于匹配被用户激活的元素，也就是元素被点击的瞬间所呈现的状态，通过它可以快速为按钮、链接等交互元素添加点击时的反馈样式，让用户明确感知到自己的操作被页面接收。
css:active的基本语法
css:active的使用方式和普通CSS选择器类似，只需要在目标元素的选择器后添加:active伪类即可，语法结构如下：
/* 基础语法 */
选择器:active {
属性: 属性值;
}
/* 示例：为所有button元素添加点击状态样式 */
button:active {
background-color: #e0e0e0;
transform: scale(0.98);
}
常见使用场景与代码示例
按钮点击反馈
按钮是最常见的需要添加点击反馈的元素，通过:active可以修改按钮的背景色、缩放比例、边框等属性，让点击效果更明显。
/* 按钮基础样式 */
.btn {
padding: 12px 24px;
background-color: #1890ff;
color: #fff;
border: none;
border-radius: 4px;
font-size: 14px;
cursor: pointer;
transition: all 0.1s ease;
}
/* 按钮点击状态样式 */
.btn:active {
background-color: #096dd9;
transform: scale(0.97);
box-shadow: 0 2px 4px rgba(0,0,0,0.2) inset;
}
链接点击反馈
对于页面内的跳转链接，也可以通过:active修改点击时的文字颜色或下划线样式，提升交互感知。
/* 链接基础样式 */
a {
color: #1890ff;
text-decoration: none;
}
/* 链接点击状态样式 */
a:active {
color: #ff4d4f;
text-decoration: underline;
}
css:active的使用注意事项
- 生效条件：
:active伪类只在元素被鼠标按下到松开之间的短暂时间生效，松开后样式会立刻恢复，不会长期保持。 - 优先级问题：
:active的优先级比普通元素选择器高，但是比!important和行内样式低，编写样式时需要注意优先级覆盖问题。 - 移动端适配：在移动端浏览器中，部分浏览器默认会为可点击元素添加自带的点击高亮效果，可能和自定义的
:active样式冲突，可以通过下面的CSS代码去除默认高亮：
/* 去除移动端点击默认高亮 */
* {
-webkit-tap-highlight-color: transparent;
}
:link、:visited、:hover、:active样式，需要按照LVHA的顺序编写，也就是link、visited、hover、active，否则可能出现样式不生效的问题。css:active与:focus的区别
很多开发者容易混淆:active和:focus，两者的核心区别如下：
| 属性 | 触发时机 | 持续时长 |
|---|---|---|
| :active | 元素被鼠标按下/触摸按下的瞬间 | 按下到松开的短暂时间 |
| :focus | 元素获得焦点时（点击、键盘tab切换等） | 直到元素失去焦点才会消失 |
实际开发中可以根据需求选择使用，比如需要短暂点击反馈用:active，需要长期聚焦提示用:focus。
css_active点击状态样式伪类选择器前端样式修改时间：2026-07-18 15:18:29