仅靠 css 的 :focus-within 和 :has() 无法区分“键盘 tab 聚焦输入框”与“鼠标点击容器本身”，必须结合 javascript 检测点击目标，才能精准触发容器级绿色边框；红色边框则可通过 :focus-visible 完全由 css 实现。
仅靠 css 的 :focus-within 和 :has() 无法区分“键盘 tab 聚焦输入框”与“鼠标点击容器本身”，必须结合 javascript 检测点击目标，才能精准触发容器级绿色边框；红色边框则可通过 :focus-visible 完全由 css 实现。
在现代 Web 开发中，常需为包含表单控件（如 ）的容器提供视觉反馈：当用户通过键盘（Tab 键）导航至内部输入框时，容器应显示醒目焦点提示（如红色轮廓）；而当用户直接点击容器区域（非输入框）时，则应呈现另一种状态（如绿色边框）。遗憾的是，纯 CSS 无法可靠区分这两种交互方式。
原因在于：
- :focus-within 在子元素获得焦点时即触发，无论焦点来源是键盘还是鼠标点击输入框，它都会激活；
- :focus-visible 仅在键盘导航触发焦点时生效（符合可访问性标准），但它的作用对象是 本身，无法直接样式化父容器；
- :has(input:focus-visible) 理论上可行，但目前（截至 2024 年主流浏览器）不被 Safari 支持，且即使支持，也无法响应“点击容器空白处”这一行为。
因此，绿色边框（点击容器触发）必须依赖 JavaScript，而红色边框（键盘聚焦输入框）可完全交由 CSS 处理。
✅ 推荐实现方案如下：
HTML 结构（添加语义化 class）：
<div class="input-container"> <input type="text" placeholder="Tab into me or click around me"> </div>
CSS 样式（专注键盘焦点反馈）：
.input-container {
padding: 1em;
border: 1px solid #ddd; /* 默认边框 */
transition: border-color 0.2s ease;
}
/* 键盘聚焦输入框时：容器显示红色边框 */
.input-container:has(input:focus-visible) {
border-color: red;
outline: none;
}
/* 鼠标点击容器本身时：添加 .clicked 类 → 触发绿色边框 */
.input-container.clicked {
border-color: green;
}
JavaScript（精准捕获“点击容器本体”事件）：
const container = document.querySelector('.input-container');
// 使用 capture 阶段确保事件在冒泡前被捕获
document.addEventListener('click', function(e) {
// 仅当点击目标是容器自身（而非其子元素如 input）时添加类
if (e.target === container) {
container.classList.add('clicked');
} else if (!container.contains(e.target)) {
// 点击发生在容器外部，清除状态
container.classList.remove('clicked');
}
});
// 可选：点击容器内其他区域（如 label、span）也视为容器点击？
// 将条件改为 `if (container.contains(e.target))` 即可扩展范围
⚠️ 注意事项：
- :has() 是较新特性，Safari 15.4+ 和 Chrome/Firefox 最新版支持，生产环境需检查兼容性或添加降级（如用 .focused class + JS 监听 focusin/focusout）；
- focus-visible 行为依赖浏览器 UA 样式和用户偏好（如是否禁用 :focus-visible），确保测试真实键盘导航流程；
- 避免对 .clicked 使用 !important —— 应通过 CSS 特异性或 transition 保证样式平滑切换；
- 若需支持点击后取消（如再次点击隐藏边框），可改用 toggle() 或状态管理逻辑。
总结：真正的交互意图识别（键盘 vs 鼠标、容器本体 vs 子元素）超出了纯 CSS 的能力边界。将 :focus-visible 用于键盘可访问性反馈，用轻量级 JavaScript 处理点击语义，是兼顾标准、兼容性与用户体验的最佳实践。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
