: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> 没设 <code>tabindex="0"，旧版 Firefox 和部分 Safari 不认它为“可聚焦子元素” - 编辑器外层容器用了
display: contents或visibility: hidden，导致浏览器无法建立焦点传播链 - 中间套了不可聚焦的 wrapper（比如纯
<span></span>或没设tabindex的<div>），焦点被“卡住”，<code>:focus-within就收不到信号 - 用了 Shadow DOM 但
:focus-within写在 shadow root 内部，没写在 host 元素上 - 如果编辑器是单个
<div contenteditable>，那高亮目标就是它自己：<code>div[contenteditable]:focus-within - 如果编辑器由多个可编辑区域组成（比如富文本工具栏 + 编辑区 + 预览区），就该写在最外层包裹容器上：
.editor-wrapper:focus-within - 若用了
<textarea></textarea>做简易编辑器，别写在textarea上——它用:focus就够了；要高亮整块区域，得写在它的父<div class="editor-field"> 上 <h3>怎么写高亮样式才不干扰编辑体验</h3> <p>编辑器对视觉稳定性要求高，改错属性会引发重排或遮挡文字：</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5806" title="html-deploy"><img src="https://img.php.cn/upload/skill/000/000/081/179066538882434.jpg" alt="html-deploy" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="overflowclass">html-deploy</a> <p class="overflowclass">使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。</p> </div> <a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <ul> <li>避免在 <code>: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，必须搭配 JS 监听
focusin/focusout并手动切换 class，比如.editor-wrapper--focused - 别在
:has()里嵌套:focus-within（如div:has(div:focus-within)）——目前仅 Chrome 支持，Firefox/Safari 还没跟上 - 测试时务必用 Tab 键真实切换焦点，鼠标点击
<label></label>或工具栏按钮触发的焦点也要覆盖到
:focus-within 必须写在哪个元素上才生效
必须写在你希望高亮的“容器”上，不是写在 <div contenteditable> 自身，也不是写在 <code><textarea></textarea> 上：
兼容性与降级必须考虑 IE 和老版本 Safari
Chrome 65+、Firefox 61+、Safari 15.4+ 都支持，但 IE 完全不支持，部分企业内网还在跑 IE11。不能只靠 :focus-within：
真正难的不是写那行 CSS，而是确认整个焦点链从外到内都畅通——尤其当编辑器混用 contenteditable、textarea 和自定义组件时，任何一个环节断掉，:focus-within 就静默失效。
