:focus-within能触发整个卡片高亮，因其作用于父容器，当卡片内任意可聚焦子元素（如input、textarea）获焦时即匹配，无需javascript；但子元素必须真实可聚焦且焦点链未被disabled、tabindex="-1"或shadow dom等阻断。
focus-within 为什么能触发整个卡片高亮
:focus-within 是 CSS3 新增的伪类，当元素自身获得焦点，或其任意后代元素获得焦点时，该元素就会匹配。表单卡片通常用 <div class="form-card"> 包裹 <code><input>、<select></select>、<textarea></textarea> 等可聚焦元素，只要其中任一子控件被点击或 Tab 进入，.form-card 就立即响应——不需要 JS，也不依赖父级监听事件。
基础写法与常见失效原因
直接给卡片容器加 :focus-within 样式即可，但以下情况会导致不生效：
-
<input>或<textarea></textarea>被设了tabindex="-1"或disabled，它们无法获得焦点 - 卡片内部有
contenteditable="true"元素但没显式设置tabindex="0"，部分浏览器（如 Safari）不将其视为可聚焦后代 - 使用了 Shadow DOM 且未在
:host层级透传焦点（需配合delegatesFocus: true） - CSS 优先级被更高权重的选择器覆盖，比如
.form-card:focus-within { box-shadow: ... }被.form-card:hover { box-shadow: none }干掉
最小可用示例：
.form-card {
padding: 1rem;
border-radius: 8px;
transition: box-shadow 0.2s ease;
}
.form-card:focus-within {
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
}
兼容性与降级方案
:focus-within 在 Chrome 60+、Firefox 52+、Safari 10.1+、Edge 79+ 均支持，但 IE 完全不支持。如果必须兼容旧版 Edge 或 IE，不能只靠它做核心交互反馈：
- 保留
:focus单独作用于每个表单控件的样式（如input:focus { outline: 2px solid #3b82f6 }），作为兜底 - 避免用
:focus-within控制关键功能（如显示提交按钮），它只适合视觉增强 - 若需 JS 降级，监听
focusin事件比focus更可靠（冒泡，能捕获到任意后代聚焦）
和 :focus 的关键区别在哪
:focus 只作用于当前获得焦点的那个具体元素，而 :focus-within 作用于它的最近祖先容器。这意味着：
- 对卡片整体加边框/阴影时，
:focus-within一行 CSS 就够；用:focus则要为每个子控件重复写相同样式，且无法统一控制卡片层级效果 -
:focus不会响应<label></label>点击触发的隐式聚焦（除非 label 的for正确关联 input id），但:focus-within会——因为最终 input 仍获得了焦点 - 移动端软键盘弹出后，
:focus-within仍保持激活；而某些安卓 WebView 中:focus可能因失焦行为异常丢失
真正容易被忽略的是：如果卡片内嵌了另一个带 :focus-within 的子容器（比如搜索框组件），外层卡片的样式可能意外持续激活——因为子容器聚焦也满足“后代聚焦”条件。这时候得用更精确的选择器或临时移除子容器的 :focus-within 触发逻辑。
