优先用外部CSS文件。因HTML5可视化编辑器频繁重写<style>易触发重排、污染作用域或被沙箱拦截，而外部文件可缓存、复用、热更新；全局样式应放editor.css中通过<link>引入，避免内联style覆盖，并采用后代选择器、class约束、srcdoc内联等方式确保contenteditable和iframe中生效。
全局样式该写在 <style> 里还是外部 CSS 文件？
优先用外部 CSS 文件。HTML5 可视化编辑器（比如基于 contenteditable 或 iframe 的编辑器）在运行时若频繁重写 <style> 标签，容易触发样式重排、污染内联样式作用域，甚至被浏览器拦截（尤其在 iframe 沙箱模式下）。外部文件可缓存、可复用、便于热更新。
实操建议：
- 把全局基础样式（如
body字体、链接颜色、段落间距）放在editor.css中，通过<link rel="stylesheet" href="editor.css">引入 - 避免在编辑器容器（如
<div id="editor">）上直接写style="..."，它会覆盖 CSS 规则且无法继承到子节点 - 若必须动态注入（如主题切换），用
document.styleSheets[0].insertRule(...)而非重写整个<style>标签
contenteditable 区域里如何让全局样式生效？
关键在作用域穿透——默认情况下，外部 CSS 不会自动影响 contenteditable 内部的自由输入内容，尤其当内容是纯文本或未包裹语义标签时。
常见错误现象：标题字体正常，但用户回车后新段落变成浏览器默认字号/行高。
立即学习“前端免费学习笔记（深入）”；
解决方法：
- 强制为编辑容器设置
class（如class="editor-root"），并在 CSS 中用后代选择器统一约束：.editor-root * { margin: 0; line-height: 1.6; } - 监听
input或compositionend事件，在插入新节点时主动补上class（如<p class="editor-paragraph">） - 禁用浏览器默认样式干扰：
.editor-root { all: unset; }再手动重置必要属性（慎用，all: unset会清空font-family等，需补全）
iframe 模式下怎么共享全局样式？
iframe 是独立文档上下文，外部 CSS 默认不生效。强行用 document.write() 注入样式易引发 CSP 报错或执行时机问题。
安全可靠的路径：
- 在 iframe 的
srcdoc属性中内联基础样式：<iframe srcdoc="<style>body{font-family:sans-serif;}p{margin:0.8em 0}</style><div contenteditable></div>"></iframe> - 若 iframe 加载独立 HTML，确保其
<head>中包含与主页面一致的<link>，且路径可跨域访问（同源或 CORS 配置正确） - 避免用
iframe.contentDocument动态写入<style>，IE 和部分移动端浏览器对跨域 iframe 的该操作限制极严
为什么改了全局 CSS，编辑器里某些元素还是不响应？
大概率是 CSS 特异性（specificity）被内联样式或编辑器自动生成的 style 属性覆盖了。可视化编辑器常给选中块加 style="font-size:18px" 这类硬编码样式，它优先级高于外部 class。
排查和修复要点：
- 用浏览器开发者工具检查目标元素，看 computed 样式中哪条规则被划掉（strikethrough），定位冲突来源
- 提高选择器权重：用
.editor-root p:not([style])或加!important（仅限兜底，勿滥用） - 在编辑器初始化阶段，用
getComputedStyle(el).fontSize检测是否已被篡改，再决定是否清除el.style.fontSize - 对富文本粘贴内容做净化（strip inline styles），用
DOMPurify.sanitize(html, { ALLOWED_ATTR: ['class'] })
全局样式的真正难点不在“怎么写”，而在于“什么时候写”和“写给谁看”——编辑器内部 DOM 是动态生成的，样式注入时机、作用域边界、用户行为干扰（粘贴、撤销、格式刷）都会绕过你预设的 CSS 规则。留心那些没被你显式创建却突然出现的 span 和 font 标签，它们才是最常破坏全局样式的元凶。
