:focus-within仅检测焦点状态而非输入内容，无法判断是否已填写；需结合:valid、:placeholder-shown等伪类或js实现“有内容时保持高亮”。
:focus-within 不能检测“是否有输入内容”，它只响应“是否获得焦点”——这是最常被误解的前提。 想靠 :focus-within 判断用户填没填、输没输、清没清，行不通。它不读取 value、不监听 input 事件、也不关心字符串长度。
为什么 :focus-within 在表单“有内容”场景下会失效
常见错误是把 :focus-within 当成 :has(:valid) 或 JS 的 el.value.length > 0 来用。但它的触发条件非常单纯：只要子元素（如 <input>）真正获得了焦点（点击、Tab 进入、.focus() 调用），父容器就匹配；一旦失焦，样式立刻撤回——和值是否为空完全无关。
典型现象：
- 用户点进空
<input>，:focus-within生效 → 样式亮起 ✅ - 用户输完内容后移开鼠标，
<input>失焦 → 样式消失 ❌（哪怕内容还在） - 用户用键盘 Tab 进入又快速离开，样式闪一下就没了
也就是说：:focus-within 描述的是“正在操作中”，不是“已填写完成”。
想实现“有内容时保持高亮”，得组合其他 CSS 伪类
要让容器在用户填了内容后仍维持视觉状态，必须引入能感知输入值的机制。纯 CSS 下唯一可靠路径是结合 :valid、:invalid 和 required 属性，或利用 :placeholder-shown 做近似判断。
实操建议：
- 给
<input>加required属性，再用:valid判断非空（注意：空字符串 + required =:invalid，首次聚焦后输入任意字符即变:valid） - 写规则时把
:focus-within和:valid同时作为条件，例如：.form-row:focus-within:valid { background-color: #e6f7ff; }—— 表示“既在操作中，又有有效内容” - 若不想强 require，可用
:not(:placeholder-shown)作为代理：前提是设置了placeholder，且用户删掉 placeholder 后开始输入（但注意：用户手动清空后 placeholder 会回来，状态又变） - 避免对
type="number"或type="email"单独依赖:valid，它们校验更严格（比如输入"123"到 email 输入框仍是:invalid）
React/Vue 中 :focus-within + 状态同步的坑
框架组件封装后，:focus-within 容易“看不见”真实焦点。比如一个 <myinput></myinput> 内部是 <div tabindex="0"><input></div>，焦点落在 div 上而非 input，导致父容器查不到可聚焦后代。
关键检查点：
- 确保原生
<input>是最终可聚焦节点（不要用div包着它还设tabIndex，除非你明确透传了焦点） - 自定义组件中，如果用了
contenteditable或模拟输入框，:focus-within不会响应，因为contenteditable="true"才算可聚焦，false或未设则不算 - 别在根节点加
tabIndex="-1"—— 这会让浏览器认为该元素“不可被 tab 访问”，从而中断:focus-within的祖先链判定 - SSR 渲染时若初始 HTML 没带
required或placeholder，CSS 伪类可能因 DOM 不一致而延迟生效
真正需要“有内容才高亮”的逻辑，:focus-within 只能负责前半段（聚焦态），后半段必须靠 :valid、JS 监听或框架状态驱动。忽略这点，就会陷入“样式闪一下就消失”的交互断层。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
