如何修复CSS选择器对富文本内容污染严重的问题？

富文本样式必须用显式作用域锚定+语义化白名单控制。应避免泛匹配后代选择器（如.content p），改用.richtext-content :is(p,h1,h2,h3,ul,ol,p)等精准规则，并服务端剥离私有class/style、前端DOMPurify净化。

富文本内容的样式不能靠全局选择器硬压，否则必然被项目其他 CSS 覆盖或反向污染；必须用显式作用域锚定 + 语义化白名单控制，把样式影响锁死在内容容器内。

为什么 .content p 这类后代选择器会失效甚至起反作用

这类写法看似合理，实则埋雷：它依赖 DOM 深度和祖先 class 的稳定性，而富文本编辑器输出的 HTML 结构不可控——可能嵌套 div、span、空文本节点，甚至插入 figure 或 p。浏览器匹配时，.content p 会命中所有后代 p，包括被编辑器自动包裹的冗余段落，导致行高、margin 叠加失控。更糟的是，一旦主应用某处写了 article p { margin: 0 }，整个富文本段落间距就归零。

1. 避免用 .content p、.article > * > p 这类泛匹配规则
2. 禁止在富文本容器上设 !important，这等于放弃可维护性
3. 不信任编辑器输出的 class 名（如 ql-align-center），它们随版本变、不语义、且常带内联 style

用 :is() + 容器锚点精准收口语义标签

现代 CSS 提供了 :is()，能用一条规则覆盖多个合法语义标签，又不扩大作用域。关键是把选择器根锚定在富文本专属容器上（比如 .richtext-content），并只允许直接子级或浅层结构生效。

1. 正确写法：.richtext-content :is(p, h1, h2, h3, ul, ol, p) { max-width: 100%; }
2. 若需控制嵌套层级，用 > 切断：.richtext-content > :is(ul, ol) > li，确保只作用于一级列表项
3. 对图片等替换元素，强制约束：.richtext-content img { height: auto; max-width: 100%; vertical-align: middle; }

富文本容器必须带明确 class 且禁用全局 reset 泄漏

很多项目用 Normalize.css 或自定义 reset 清除 ul、ol 的 list-style 和 margin，但没给富文本容器单独重置回来。结果就是后台编辑好的列表，在前端变成无符号、无缩进的一坨文字。

1. 在富文本容器上显式重置关键属性：.richtext-content { margin: 0; padding: 0; } .richtext-content ul, .richtext-content ol { list-style-position: outside; margin: 1em 0; padding-left: 2em; }
2. 禁用外部 reset 对该容器的影响：在 reset 文件末尾加 .richtext-content * { all: revert; }（注意兼容性，Safari 15.4+ 支持）
3. 若用 CSS-in-JS 或 scoped style，确保 .richtext-content 是顶层 wrapper，不被父组件的 scoped class 包裹穿透

服务端下发前必须剥离编辑器私有 class 和 style 属性

前端再精细的 CSS 也防不住富文本里混入的 class="mce-item-table" 或 style="text-align: justify;"。这些非语义属性会干扰选择器匹配，且无法用 CSS 规则统一清除。

1. 服务端入库前，用 Cheerio 解析 HTML 字符串，执行：$(html).find('*').removeAttr('class').removeAttr('style').removeAttr('data-mce-*')
2. 只保留白名单标签：['p', 'h1', 'h2', 'h3', 'ul', 'ol', 'li', 'strong', 'em', 'a', 'img', 'p']
3. 前端渲染前再跑一次 DOMPurify.sanitize(html, { FORBID_TAGS: ['script', 'iframe'], ALLOWED_ATTR: ['href', 'src', 'alt'] })

真正难的不是写几条 CSS，而是让团队所有人停止往 .content 里塞 div > p > span 这类“看起来能用”的临时样式——一旦松动这条边界，富文本的样式就再也无法 predict。