本文介绍一种纯 css 方案，利用 :active 与 :has() 伪类组合，精准控制卡片激活态样式仅在用户真正点击卡片非表单区域时生效，避免文本框聚焦时误触父级 :active 样式。
本文介绍一种纯 css 方案，利用 :active 与 :has() 伪类组合，精准控制卡片激活态样式仅在用户真正点击卡片非表单区域时生效，避免文本框聚焦时误触父级 :active 样式。
在构建交互式卡片组件时，:active 伪类常被用于提供即时的视觉反馈（例如点击时背景色变化或边距微调），提升用户体验。但当卡片内嵌 <input>、<textarea></textarea> 等可聚焦表单控件时，一个常见陷阱随之出现：用户点击输入框本身也会触发父 .card:active 样式——这并非预期行为，因为此时用户尚未“选择卡片”，而只是准备输入自定义内容。
传统 JavaScript 方案（如 event.stopPropagation() 或 preventDefault()）在此场景下无效，原因在于 :active 是 CSS 伪类，其触发由浏览器底层的激活状态（activation state）机制决定，而非 DOM 事件冒泡链；因此 JS 事件处理无法拦截该样式计算过程。
✅ 正确解法是使用 CSS 逻辑组合伪类，核心思路是：
仅当卡片处于激活态，且其内部没有任何 input 元素也处于激活态时，才应用该样式。
这可通过现代 CSS 的 :has() 关系伪类实现（Chrome 105+、Firefox 121+、Safari 15.4+ 支持）：
.card:active:not(:has(input:active)) {
background-color: #b9bec5;
margin: 10px 6px 10px 14px;
}
该规则含义清晰：
-
.card:active：卡片自身被激活（如鼠标按下）； -
:has(input:active)：卡片内存在某个<input>正处于激活态（即当前正被点击/聚焦）； -
:not(...)：排除上述情况 → 只有当卡片被点，且点击目标不是其内部的 input 时，才启用样式。
? 注意事项：
-
:has()目前不支持在@keyframes或部分旧版预处理器中嵌套使用，请确保构建工具兼容（如 PostCSS 需启用postcss-selector-not或升级至支持:has的插件）； - 若需兼容不支持
:has()的浏览器（如 IE 或旧版 Edge），可降级为 JS 方案：监听mousedown事件，动态添加.is-actively-clicked类，并通过.card.is-actively-clicked:not(.has-input-active)控制样式； - 输入框建议保留
:focus样式以明确焦点状态，例如：.card input:focus { outline: 2px solid #4a6fa5; background-color: #fff; }
总结：纯 CSS 解决 :active 误触发问题的关键，在于从「阻止事件」转向「精确条件匹配」。借助 :active:not(:has(input:active))，我们以声明式方式表达了业务逻辑：“卡片被选中” ≠ “卡片任意区域被点”，而是“卡片的非表单区域被点”。这一模式同样适用于按钮内含图标、开关控件旁附说明文字等复合交互场景。
