:focus-within用于编辑器容器高亮更可靠轻量，但需确保容器为可聚焦上下文且内部元素能获焦；常见失效原因包括contenteditable未设tabindex、display:contents、不可聚焦wrapper、Shadow DOM位置错误；必须写在目标容器上，如.editor-wrapper:focus-within；高亮优先用outline或外扩box-shadow，避免重排；IE不支持，需JS降级。
直接说结论：用 :focus-within 给编辑器容器加样式，比监听每个可编辑子元素更可靠、更轻量，但前提是容器本身得是“可聚焦上下文”，且内部元素真能获焦。
为什么编辑器里 :focus-within 容易失效
不是写了就亮——常见卡点都在 DOM 结构和焦点能力上：
-
contenteditable的<div>没设tabindex="0"，旧版 Firefox 和部分 Safari 不认它为“可聚焦子元素” - 编辑器外层容器用了
display: contents或visibility: hidden，导致浏览器无法建立焦点传播链 - 中间套了不可聚焦的 wrapper（比如纯
<span>或没设tabindex的<div>），焦点被“卡住”，:focus-within就收不到信号 - 用了 Shadow DOM 但
:focus-within写在 shadow root 内部，没写在 host 元素上
:focus-within 必须写在哪个元素上才生效
必须写在你希望高亮的“容器”上，不是写在 <div contenteditable> 自身，也不是写在 <textarea> 上：
- 如果编辑器是单个
<div contenteditable>，那高亮目标就是它自己：div[contenteditable]:focus-within - 如果编辑器由多个可编辑区域组成（比如富文本工具栏 + 编辑区 + 预览区），就该写在最外层包裹容器上：
.editor-wrapper:focus-within - 若用了
<textarea>做简易编辑器，别写在textarea上——它用:focus就够了；要高亮整块区域，得写在它的父<div class="editor-field">上
怎么写高亮样式才不干扰编辑体验
编辑器对视觉稳定性要求高，改错属性会引发重排或遮挡文字：
立即学习“前端免费学习笔记（深入）”；
- 避免在
:focus-within规则里改height、margin、padding或display——光标位置可能跳变，用户输入时会“抖” - 优先用
outline（如outline: 2px solid #007bff）：不占空间、无重排、键盘导航友好 - 要用
box-shadow，选box-shadow: 0 0 0 2px rgba(0,123,255,0.25)，别加inset，否则阴影往里缩，盖住首行文字 - 背景色微调可以，但别写
background-color: transparent——它可能被父级继承覆盖，明确写死值，比如background-color: #fff
兼容性与降级必须考虑 IE 和老版本 Safari
Chrome 65+、Firefox 61+、Safari 15.4+ 都支持，但 IE 完全不支持，部分企业内网还在跑 IE11。不能只靠 :focus-within：
- 如果项目需兼容 IE，必须搭配 JS 监听
focusin/focusout并手动切换 class，比如.editor-wrapper--focused - 别在
:has()里嵌套:focus-within（如div:has(div:focus-within)）——目前仅 Chrome 支持，Firefox/Safari 还没跟上 - 测试时务必用 Tab 键真实切换焦点，鼠标点击
<label>或工具栏按钮触发的焦点也要覆盖到
真正难的不是写那行 CSS，而是确认整个焦点链从外到内都畅通——尤其当编辑器混用 contenteditable、textarea 和自定义组件时，任何一个环节断掉，:focus-within 就静默失效。
