document.head.appendChild(styleEl)是唯一可靠入口，必须先创建style元素并立即挂载到head，否则styleEl.sheet为null导致insertRule报错；wangEditor5需用.w-e-textp等专属类名写选择器，样式注入后需重新setValue或初始化编辑器才能生效。
document.head.appendChild(styleEl) 是唯一可靠入口
直接往 document.body 或任意容器里 append <style> 标签，样式大概率不生效。浏览器只认 document.head 作为样式注入的合法父节点——哪怕你用 innerHTML 往 head 字符串里拼接，也因解析时机问题被忽略。
常见错误现象：styleEl.sheet 为 null、样式规则没应用、编辑器内段落/代码块仍无间距或背景色。
- 必须先创建
style元素，再立即调用document.head.appendChild(styleEl) - 不要在元素创建后、挂载前就尝试访问
styleEl.sheet.insertRule，否则报TypeError: Cannot call insertRule on a null object - 若需后续动态加规则，务必等
styleEl.sheet可读后再操作（可加简单轮询或用setTimeout延迟一帧）
wangEditor5 的 DOM 结构决定了选择器写法
wangEditor5 渲染出的 HTML 不是裸标签，所有内容都包裹在带固定类名的容器里，比如 <p class="w-e-textp">、<pre class="w-e-textpre"><code>。直接写 p { margin: 1em 0; } 是无效的，因为编辑器内容不在全局作用域下自由渲染，而是受其内部 class 控制。
使用场景：你希望代码块有圆角和横向滚动，段落行高统一，标题字体加粗但不破坏编辑器默认字号体系。
立即学习“前端免费学习笔记（深入）”；
- 优先用编辑器输出的 class 名做选择器，例如：
.w-e-textpre、.w-e-textcode - 避免用通配符重置盒模型（如
* { box-sizing: border-box; }），它会干扰编辑器内部组件的布局逻辑 - 如果要用 CSS 变量控制主题色，定义在
:root即可，编辑器内元素可通过var(--code-bg-color)引用
多个 style 标签共存时，顺序即优先级
你可能同时引入了 Prism.js 的高亮 CSS、自定义排版样式、以及第三方 UI 库的 reset.css。它们都会变成 <style> 或 <link> 节点插入 head，而浏览器按 DOM 中出现顺序解析——后加载的同选择器规则会覆盖前面的。
容易踩的坑：你在构建时注入了 Prism 的 CSS，又在运行时用 document.head.appendChild 加了一套自定义样式，结果发现代码块背景还是 Prism 默认色。
- 把自定义样式放在所有外部 CSS 加载完成之后执行（监听
load事件或用Promise.all等待资源） - 别依赖位置“隐藏”旧规则，删掉冗余
<style>或显式加!important更直接 - 避免在页面底部堆砌多个零散
<style>，维护成本高；建议合并成一个styleEl.textContent字符串
动态注入后，编辑器内容不会自动重绘
样式注入成功不代表已渲染的内容立刻响应变化。wangEditor5 的内容是静态 HTML 片段，它不会监听 document.styleSheets 变更并触发重排。你改了 .w-e-textp 的 line-height，已有段落不会自动更新，除非用户手动触发编辑（比如光标进出或输入空格）。
这不是 bug，是性能设计：避免样式变更引发全量 DOM 重绘。
- 若需强制刷新已有内容，可对编辑器实例调用
editor.setValue(editor.getHtml())（慎用，会丢失光标位置） - 更稳妥的做法是：样式注入完成后再初始化编辑器，确保首屏渲染即命中最新规则
- 注意 SSR 场景：服务端生成的 HTML 已含样式，客户端 JS 注入的样式仅影响后续交互，SEO 相关样式必须在构建阶段注入
