:active 无法实现点击后持久高亮，因其仅在按下瞬间生效；持久高亮需用 JavaScript 切换类名（如 is-highlighted），并配合 CSS 样式，同时注意移动端 touch 事件、键盘无障碍支持及合并单元格委托处理。
:active 不能实现点击后持久高亮，它只在鼠标按下或手指按住的瞬间生效。真要让单元格“点一下就变色并保持”，必须用 JavaScript 控制类名切换。
为什么 :active 看起来没反应？
常见现象是写了 td:active { background: #ffeb3b; }，但点下去一闪就没了——这不是 bug，是 :active 的设计本意。它不记录状态，也不改变 DOM，纯粹是“正在被按下的快照”。没有 transition 的话，颜色变化甚至来不及被肉眼识别。
- 必须给
td显式加cursor: pointer，否则部分浏览器（尤其旧版 iOS Safari）可能压根不触发:active - 父容器设了
overflow: hidden且td边框/阴影超出时，某些安卓 WebView 下:active会失效 -
:active不响应键盘 Enter/Space，无障碍支持弱；若需键盘操作，得靠tabindex+:focus或 JS 监听
如何用 JS 实现点击后持久高亮？
核心逻辑：监听 click，给目标 td 切换类名（比如 is-highlighted），再用 CSS 定义该类样式。注意避免全局状态污染，通常只需单选或可多选。
- 单选场景：每次点击先清除所有
is-highlighted，再给当前td加上 - 多选场景：用
classList.toggle('is-highlighted')，配合Ctrl或Shift键扩展选择范围（需监听keydown） - 若表格含合并单元格（
rowspan/colspan），直接绑定td事件会漏掉跨行区域，建议委托到table上再用e.target.closest('td')安全捕获
示例片段：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
table.addEventListener('click', e => {
const td = e.target.closest('td');
if (!td) return;
td.classList.toggle('is-highlighted');
});
对应 CSS：
.is-highlighted {
background-color: #4caf50 !important;
color: white;
}
移动端点击高亮容易踩的坑
触摸设备上，:active 延迟或不触发很常见，单纯依赖 CSS 几乎不可靠。
- 必须加
touch-action: manipulation到td或其父级，否则 iOS 可能等 300ms 才响应 - 不要只监听
click：iOS Safari 中，click在 touch 设备上存在延迟且偶发丢失，建议同时监听touchstart并e.preventDefault()防止误触发滚动 - 视觉反馈要更明显：纯背景色变化在强光下难辨识，建议叠加
box-shadow或微小transform: scale(1.02)
真正复杂的不是“怎么高亮”，而是“高亮后怎么管理状态”——比如是否允许取消、是否联动其他行、是否要存到 localStorage。这些都超出了 :active 的能力边界，得靠 JS 明确维护状态变量和 DOM 类名同步。
