本文介绍一种纯 CSS 方案，利用 :active:not(:has(input:active)) 组合伪类精准控制卡片激活样式，避免文本框点击误触父级 :active 效果，无需 JavaScript 干预。
本文介绍一种纯 css 方案，利用 :active:not(:has(input:active)) 组合伪类精准控制卡片激活样式，避免文本框点击误触父级 :active 效果，无需 javascript 干预。
在构建交互式卡片组件时，:active 伪类常被用于提供即时的视觉反馈——例如点击卡片时改变背景色或边距，以表明用户已触发选择动作。但当卡片内嵌可交互子元素（如 <input type="text">）时，一个常见陷阱随之出现：点击输入框本身也会触发父 .card:active 样式，导致视觉上“误选”卡片，干扰用户输入自定义值的流程。
传统思路往往试图用 JavaScript 拦截事件（如 event.stopPropagation()），但问题在于：:active 是 CSS 伪类，其触发依赖于元素是否处于被用户主动激活状态（active state），而非事件冒泡路径；因此 stopPropagation() 对其完全无效——它影响的是事件流，而非 CSS 状态机。
✅ 正确解法是 从状态逻辑层面排除干扰：仅当卡片自身被激活 且 其内部 input 未处于激活态时，才应用样式。这可通过现代 CSS 的组合伪类实现：
.card:active:not(:has(input:active)) {
background-color: #b9bec5;
margin: 10px 6px 10px 14px;
}
该规则含义清晰：
-
.card:active：卡片当前处于激活态（如鼠标按下）； -
:not(:has(input:active))：卡片内不存在任何处于:active状态的<input>子元素； - 二者结合，确保只有当用户直接点击卡片空白区域（或非输入控件部分）时，样式才生效；而点击输入框时，因
input:active成立，:has()匹配成功，:not()将整个选择器排除，样式不应用。
⚠️ 注意事项：
-
:has()是 CSS Selectors Level 4 特性，主流浏览器（Chrome 105+、Firefox 121+、Safari 15.4+）已全面支持，但旧版 IE 及较老移动端 WebView 不支持。若需兼容更广环境，可降级为 JS 监听mousedown/touchstart并动态添加.is-actively-clicked类，再用.card.is-actively-clicked:not(.has-active-input)控制样式。 - 输入框自身的
:active状态（如聚焦时的边框变化）仍独立存在，不受此规则影响，可另行定义input:active样式增强体验。 - 避免在
.card上设置pointer-events: none或对子元素设pointer-events: auto——这会破坏语义与可访问性，且无法解决根本的状态判定问题。
总结：CSS 状态控制应优先通过精确的状态组合表达意图，而非强行阻断底层机制。:active:not(:has(...)) 不仅简洁高效，更体现了现代 CSS 在逻辑表达力上的显著进步——让样式真正“理解”用户的交互意图。
