:active仅实现鼠标按下瞬间反馈，无法持久高亮；持久选中需javascript控制类名，并兼顾可访问性、性能与兼容性。
:active 只能让表格单元格在鼠标按下的瞬间变色，松开就恢复——它不是“选中”，而是“正在被按”。真要点击后保持高亮，必须用 JavaScript 控制类名。
为什么 :active 在表格里看起来没反应？
常见原因不是代码写错，而是理解偏差或缺失必要条件：
- 漏写了
cursor: pointer，用户看不出可点，自然不按； - 没加
transition，颜色突变像闪烁，人眼根本捕捉不到； - 表格单元格（
<td>）默认不响应 <code>:active，除非显式设了tabindex="0"或绑定事件监听器； - 移动端某些 WebView 下，父容器有
overflow: hidden且子元素超出边界时，:active会静默失效。
用 :active 做瞬时反馈：简单但有限
适合按钮式操作单元格（比如“删除”“编辑”列），目标是让用户确认“我点下去了”：
.data-table td.action:active {
background-color: #ff6b6b;
transform: scale(0.98);
transition: background-color 0.1s, transform 0.1s;
}
.data-table td.action {
cursor: pointer;
user-select: none;
}
注意两点：
- 必须给
<td> 加 <code>cursor: pointer，否则 Safari 和部分安卓浏览器不触发:active； - 别对整行
<tr> 直接套 <code>:active，IE 和旧版 Chrome 不支持<tr> 的伪类，得退化到 <code><td> 级别处理。 <h3>用 JavaScript 实现持久高亮：真正可用的方案</h3> <p>点击后保持背景色、支持多选/单选、能和键盘操作配合——这些都绕不开 JS：</p> <ul><li>给每个 <code><td> 或 <code><tr> 加 <code>tabindex="0"，让它能接收焦点，支持空格键触发； - 监听
click和keydown（捕获 Enter/Space），统一切换is-selected类； - CSS 写
.is-selected { background-color: #4a90e2; }，别依赖:active存状态； - 避免直接操作
style.backgroundColor，用 class 切换更易维护、可动画、兼容性好。
示例逻辑片段：
document.querySelectorAll('table.data-table td').forEach(cell => {
cell.tabIndex = 0;
cell.addEventListener('click', () => {
cell.classList.toggle('is-selected');
});
cell.addEventListener('keydown', e => {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
cell.classList.toggle('is-selected');
}
});
});
容易被忽略的细节：可访问性与性能
表格高亮不是视觉装饰，而是状态传达。忽略以下点，用户可能根本不知道自己点了什么：
- 没设
tabindex的<td>，键盘用户完全无法聚焦和操作； <li>只靠 <code>:active+transition，屏幕阅读器无法感知状态变化； - 对整张大表（比如 1000 行）每个单元格都绑事件，会明显卡顿，应考虑事件委托；
-
transform比纯background-color更耗 GPU，高频交互下慎用缩放+过渡组合。
真正难的不是让颜色变，而是让“谁被点了”这个信息，在鼠标、键盘、读屏器、动画、性能之间都可靠同步。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
