:focus-within必须写在父容器上，且子元素必须真正可聚焦，否则永不触发；它监听后代获焦，非自身焦点，如.form-group:focus-within响应内部input获焦。
直接结论：:focus-within 必须写在父容器上，且子元素必须真正可聚焦，否则它永远不触发。
为什么:focus-within加在上完全没反应
很多人写 input:focus-within，结果样式死活不出。这不是浏览器 bug，而是语义错误——:focus-within 是为“监听者”设计的伪类，不是 :focus 的增强版。它只在**有后代可聚焦**的元素上才有意义。
正确做法是把伪类加在包裹层上，比如：
.form-group:focus-within { border-color: #007bff; }
只要 .form-group 里有 <input>、<textarea> 或带 tabindex="0" 的元素获得焦点，这条规则就生效。
立即学习“前端免费学习笔记（深入）”；
-
input:focus→ 只响应自身焦点 -
input:focus-within→ 永远不匹配（input没有可聚焦的后代） -
div:focus-within→ 只要它内部任意子元素获焦，就匹配
哪些情况会让:focus-within“失灵”
写了但没效果，大概率是焦点链被意外切断。常见原因包括：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 子
<input>被套了一层div，而该div设了display: contents或visibility: hidden，浏览器无法确认焦点归属 - 父容器或中间某层用了
contain: layout或contain: paint，某些 Chrome/Firefox 版本会阻断焦点冒泡 - 子元素本身被设了
tabindex="-1"、disabled，或 CSS 上加了pointer-events: none - 移动端 Safari 15.4–16.3 对
input[type="search"]+overflow: hidden组合有已知 bug，建议降级用focusin事件监听
验证是否真能聚焦？右键检查元素 → 点击 <input> → 在控制台执行 document.activeElement，看返回是不是它自己。
怎么写:focus-within样式才不翻车
视觉反馈要明显，但不能破坏布局或影响键盘导航。几个关键约束：
- 别在
:focus-within规则里改height、margin或display—— 表格中<tr>高度变化会导致整行跳动 - 优先用
outline: 2px solid #007bff：不占空间、无重排、键盘用户友好 - 要用阴影，选
box-shadow: 0 0 0 2px rgba(0,123,255,0.25)，别加inset，否则会往里缩盖住文字 - 如果同时用了
:focus和:focus-within，注意权重：后者作用于父容器，前者作用于子元素，不冲突；但若写成.form-group:focus-within input和input:focus，后者会覆盖前者
嵌套结构下:focus-within会匹配哪些祖先
它不是只认直系父级，而是整个祖先链。比如 HTML 是：
<form>
<div class="card">
<div class="field">
<input>
</div>
</div>
</form>
点击 <input> 时，以下全部匹配：
form:focus-within.card:focus-within.field:focus-within
这个特性可以用来做嵌套下拉菜单（外层 .dropdown 和内层 .dropdown-menu 同时响应），但要注意样式优先级和是否真需要多层高亮——很多时候只需最近一层容器响应就够了。
最容易被忽略的一点：:focus-within 不关心焦点“怎么来”，只认“有没有”。鼠标点、Tab 进、JS 调用 element.focus()，它都响应；但它也极度诚实——子元素只要没真正进入浏览器焦点管理树，它就绝不匹配。
