:hover 仅在指针稳定停留时生效，不适用于纯触控设备；:active 仅在按下瞬间触发且 ios 默认禁用；:focus 在任何焦点获取时生效，:focus-visible 仅限键盘导航，二者需区分使用。
:hover 是悬停，不是“鼠标移入就永远生效”
很多人写 button:hover 后发现触摸屏没反应，或鼠标快速划过时样式闪一下就消失——这不是 bug，是设计使然。:hover 只在指针稳定停留在元素上时生效，且不适用于纯触控设备（iOS Safari、Android Chrome 默认禁用 hover 模拟）。
- 移动端别依赖
:hover做核心交互，比如下拉菜单展开必须配合 JavaScript - 想让悬停效果更自然，一定要加
transition，例如transition: background-color 0.2s, transform 0.15s - 避免写
button:hover:focus这种组合——它要求“既悬停又聚焦”，现实中几乎不会同时成立
:active 是按下瞬间，持续时间极短
:active 的触发窗口非常窄：从鼠标左键按下（或触屏 touchstart）开始，到松开（mouseup / touchend）结束。浏览器默认只维持几十毫秒，肉眼容易忽略。
- 直接改
background-color往往看不出变化，建议搭配transform: scale(0.98)或box-shadow: inset增强反馈 - 不要指望靠
:active实现“按住不放持续变色”，那是:focus或 JavaScript 的事 - 在 iOS 上，
:active默认被禁用，需加* { -webkit-tap-highlight-color: transparent; }并确保按钮有cursor: pointer才能激活
:focus 和 :focus-visible 必须区分使用场景
:focus 在任何获得焦点时都触发（鼠标点击、Tab 切换、JS 调用 .focus()），而 :focus-visible 只在键盘导航（如按 Tab）时生效，这是现代可访问性的关键区分点。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 别写
outline: none全局清除焦点环——这会让键盘用户彻底迷失 - 推荐写法：
button:focus:not(:hover) { outline: 2px solid #007bff; }，避免鼠标操作时叠加难看的 outline -
:focus-visible在 Safari 15.4+ 才稳定支持，旧版可用@supports (focus-visible: auto)包裹做降级 - 禁用状态按钮（
disabled）不会触发:focus，但会响应:disabled伪类
多个伪类连写 vs 逗号分隔，逻辑完全不同
写 button:hover, button:focus, button:active 是“任一状态都应用样式”，而 button:hover:focus:enabled 是“三者同时满足才生效”。中间多一个空格，语义就全错。
- 错误示例：
button:hover :focus（带空格）→ 匹配的是 button 悬停时其内部某个聚焦的子元素 - 正确组合：
button:enabled:hover表示“启用状态下悬停”，比单纯:hover更精准 - 禁用按钮要单独处理：
button:disabled应设opacity: 0.6; cursor: not-allowed;，不能只靠:hover覆盖
真正容易被忽略的，是 :active 在 iOS 上的失效机制和 :focus-visible 的渐进增强逻辑——不测真机、不跑键盘流，很容易做出只有鼠标用户能用的按钮。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
