本文详解为何纯 css 无法区分“键盘聚焦输入框”与“鼠标点击容器”两种交互状态，并提供兼容性良好的 js + css 混合方案，确保键盘可访问性（focus-visible）与鼠标操作（click）行为精准分离。
本文详解为何纯 css 无法区分“键盘聚焦输入框”与“鼠标点击容器”两种交互状态，并提供兼容性良好的 js + css 混合方案，确保键盘可访问性（focus-visible）与鼠标操作（click）行为精准分离。
在现代 Web 开发中，我们常希望容器能根据用户交互方式呈现不同视觉反馈：当用户通过 Tab 键聚焦到内部 <input> 时，容器高亮红色边框（强调键盘焦点路径，提升无障碍体验）；而当用户直接点击容器区域（包括空白处或子元素）时，则显示绿色边框（表示主动选择容器）。遗憾的是，纯 CSS 无法可靠区分“点击容器本身”与“键盘聚焦其子 input”这两种语义不同的交互意图。
原因在于：
- :focus-within 和 :has(input:focus-visible) 均依赖元素获得焦点，但点击容器本身并不会让容器获得焦点（除非显式设置 tabindex），因此无法触发对应样式；
- :focus-visible 仅作用于当前获得焦点且满足“可见焦点”条件的元素（如键盘触发），但它无法反向影响父容器的“点击态”；
- CSS 中没有 :clicked 或 :user-initiated-click 这类伪类，也无法通过 :has() 检测“非焦点但被点击”的状态。
✅ 正确解法：CSS 负责键盘焦点样式，JavaScript 负责捕获并标记点击行为
以下是推荐实现（含无障碍考量）：
立即学习“前端免费学习笔记（深入）”；
<div class="input-container" tabindex="0"> <input type="text" placeholder="Tab to focus me"> </div>
.input-container {
padding: 1em;
border: 1px solid #ddd;
outline: none; /* 避免重复轮廓 */
}
/* 键盘聚焦 input 时：容器显示红色边框（使用 focus-visible 确保仅键盘触发） */
.input-container:has(input:focus-visible) {
border-color: red;
box-shadow: 0 0 0 2px rgba(255, 0, 0, 0.3);
}
/* 用户点击容器（含任意子元素）时：添加 .clicked 类 */
.input-container.clicked {
border-color: green;
background-color: #f9fdfc;
}
/* 可选：为键盘聚焦容器本身提供视觉反馈（增强可访问性） */
.input-container:focus-visible {
outline: 2px solid #007aff;
outline-offset: 2px;
}const container = document.querySelector('.input-container');
// 点击时添加 clicked 类（支持点击容器内任意位置）
container.addEventListener('click', () => {
container.classList.add('clicked');
});
// 可选：点击外部时移除 clicked 状态（提升 UX 一致性）
document.addEventListener('click', (e) => {
if (!container.contains(e.target)) {
container.classList.remove('clicked');
}
});⚠️ 注意事项：
- 不要给容器设置 tabindex="-1"（会破坏键盘导航流），推荐 tabindex="0" 使其可聚焦，同时保持自然 tab 顺序；
- :has() 需注意浏览器兼容性（Chrome 105+、Firefox 119+、Safari 15.4+ 支持；旧版需降级处理）；
- 若需支持 IE 或老旧浏览器，应完全弃用 :has()，改用 JavaScript 监听 input:focus 和 container:click 并切换类名；
- focus-visible 的 polyfill（如 focus-visible）可增强跨浏览器一致性。
总结：CSS 擅长声明式状态响应，但交互意图识别仍需 JavaScript 协同。本方案兼顾可访问性（键盘优先）、用户体验（点击即时反馈）与维护性（职责分离），是当前最稳健的实践模式。
