富文本样式必须用显式作用域锚定+语义化白名单控制。应避免泛匹配后代选择器（如.content p），改用.richtext-content :is(p,h1,h2,h3,ul,ol,blockquote)等精准规则，并服务端剥离私有class/style、前端dompurify净化。
富文本内容的样式不能靠全局选择器硬压，否则必然被项目其他 CSS 覆盖或反向污染；必须用显式作用域锚定 + 语义化白名单控制，把样式影响锁死在内容容器内。
为什么 .content p 这类后代选择器会失效甚至起反作用
这类写法看似合理，实则埋雷：它依赖 DOM 深度和祖先 class 的稳定性，而富文本编辑器输出的 HTML 结构不可控——可能嵌套 div、span、空文本节点，甚至插入 figure 或 blockquote。浏览器匹配时，.content p 会命中所有后代 p，包括被编辑器自动包裹的冗余段落，导致行高、margin 叠加失控。更糟的是，一旦主应用某处写了 article p { margin: 0 }，整个富文本段落间距就归零。
- 避免用
.content p、.article > * > p这类泛匹配规则 - 禁止在富文本容器上设
!important，这等于放弃可维护性 - 不信任编辑器输出的 class 名（如
ql-align-center），它们随版本变、不语义、且常带内联 style
用 :is() + 容器锚点精准收口语义标签
现代 CSS 提供了 :is()，能用一条规则覆盖多个合法语义标签，又不扩大作用域。关键是把选择器根锚定在富文本专属容器上（比如 .richtext-content），并只允许直接子级或浅层结构生效。
- 正确写法：
.richtext-content :is(p, h1, h2, h3, ul, ol, blockquote) { max-width: 100%; } - 若需控制嵌套层级，用
>切断：.richtext-content > :is(ul, ol) > li，确保只作用于一级列表项 - 对图片等替换元素，强制约束：
.richtext-content img { height: auto; max-width: 100%; vertical-align: middle; }
富文本容器必须带明确 class 且禁用全局 reset 泄漏
很多项目用 Normalize.css 或自定义 reset 清除 ul、ol 的 list-style 和 margin，但没给富文本容器单独重置回来。结果就是后台编辑好的列表，在前端变成无符号、无缩进的一坨文字。
- 在富文本容器上显式重置关键属性：
.richtext-content { margin: 0; padding: 0; } .richtext-content ul, .richtext-content ol { list-style-position: outside; margin: 1em 0; padding-left: 2em; } - 禁用外部 reset 对该容器的影响：在 reset 文件末尾加
.richtext-content * { all: revert; }（注意兼容性，Safari 15.4+ 支持） - 若用 CSS-in-JS 或 scoped style，确保
.richtext-content是顶层 wrapper，不被父组件的 scoped class 包裹穿透
服务端下发前必须剥离编辑器私有 class 和 style 属性
前端再精细的 CSS 也防不住富文本里混入的 class="mce-item-table" 或 style="text-align: justify;"。这些非语义属性会干扰选择器匹配，且无法用 CSS 规则统一清除。
- 服务端入库前，用 Cheerio 解析 HTML 字符串，执行：
$(html).find('*').removeAttr('class').removeAttr('style').removeAttr('data-mce-*') - 只保留白名单标签：
['p', 'h1', 'h2', 'h3', 'ul', 'ol', 'li', 'strong', 'em', 'a', 'img', 'blockquote'] - 前端渲染前再跑一次
DOMPurify.sanitize(html, { FORBID_TAGS: ['script', 'iframe'], ALLOWED_ATTR: ['href', 'src', 'alt'] })
真正难的不是写几条 CSS，而是让团队所有人停止往 .content 里塞 div > p > span 这类“看起来能用”的临时样式——一旦松动这条边界，富文本的样式就再也无法 predict。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
