:focus可直接选中获焦输入框，需确保元素可聚焦且未被禁用；input:focus最常用；:focus-visible仅键盘导航触发，兼容性有限；样式失效常因优先级、outline重置或移动端/Safari特性。
focus伪类选中输入框的正确写法
直接用 :focus 就能选中当前获得焦点的输入框，但必须确保目标元素本身支持焦点（比如 、、），且没被 tabindex="-1" 或 disabled 阻断。
常见错误是写成 input:focus 却发现样式不生效——其实不是选择器错了，而是输入框被禁用、或父容器用了 pointer-events: none、或 JS 主动调用了 blur() 干扰了焦点状态。
-
input:focus是最常用也最安全的写法，兼容所有现代浏览器（包括 IE8+） - 如果想同时覆盖各类可聚焦表单控件，可用
input:focus, textarea:focus, select:focus, button:focus - 避免写成
:focus input（这是选“焦点在父元素上、子元素是 input”的情况，完全不是你想要的）
focus与focus-visible的区别和取舍
:focus 一获得焦点就触发，不管用户是用鼠标点还是键盘 Tab 进入；:focus-visible 只在键盘导航时才激活，对鼠标点击无反应——这是为可访问性优化的关键区分。
如果你只希望键盘用户看到焦点轮廓（避免鼠标用户看到“多余高亮”），优先用 :focus-visible；但要注意它的兼容性：Chrome 86+、Firefox 84+、Safari 15.4+ 支持，旧版 Safari 和部分安卓 WebView 不认它。
- 渐进增强写法：
input:focus { outline: 2px solid #007bff; } input:focus-visible { outline: 2px solid #0056b3; } - 不要用
:focus-visible替代:focus做基础焦点反馈，否则键盘用户在不支持的浏览器里会彻底失去焦点指示 - 某些框架（如 React）可能因事件代理导致
:focus-visible触发延迟或失效，建议在真实交互中手动测试
focus样式不生效的几个典型原因
写了 input:focus { border-color: red; } 却没变化？大概率是被更高优先级的样式盖住了，或者焦点根本没真正落在该元素上。
- CSS 优先级问题：检查是否被
!important、内联样式、或更具体的选择器（如.form-control:focus）覆盖 - outline 被重置后没补 border：很多重置 CSS 会写
* { outline: none; }，但没给:focus补替代样式，导致“看起来没反应” - 移动端 Safari 的怪癖：iOS 15.4 之前，
input[type="number"]在软键盘弹出后可能短暂丢失:focus状态 - React/Vue 中动态渲染的 input：如果组件重渲染导致 DOM 节点重建，焦点会丢失，
:focus自然失效
配合 JavaScript 检测焦点状态的实用技巧
CSS 的 :focus 是被动响应，有时你需要主动知道“现在谁有焦点”，比如做表单校验或快捷键路由。
- 用
document.activeElement获取当前焦点元素，注意它返回的是 DOM 节点，不是 jQuery 对象 - 监听
focusin和focusout事件比focus/blur更可靠，因为它们会冒泡，适合委托到父容器 - 判断是否是预期的输入框：
if (e.target.matches('input, textarea')) { /* 处理 */ } - 别依赖
document.hasFocus()判断页面是否激活——它只告诉你标签页是否在前台，不反映具体元素焦点
复杂点在于：焦点可能落在 shadow DOM 内部、iframe 里，或被 contenteditable 元素劫持。这种情况下 :focus 依然有效，但 JS 检测就得额外处理边界场景。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
