全局 p { text-indent: 2em; } 会误伤标题和引用，因CSS不区分语义，所有p标签无论位置均生效；应限定为.content p { text-indent: 2em; }并重置例外，富文本需单独隔离，组件化中注意作用域穿透。
为什么全局 p { text-indent: 2em; } 会误伤标题和引用
因为 CSS 选择器不区分语义，只要匹配到 p 就生效。而实际页面中，p 可能出现在标题栏、侧边栏、引用块、富文本编辑器输出区甚至表格单元格里——这些地方不该有首行缩进。最典型的是 CMS 导出的 HTML，常把标题也包在 p 里，结果标题文字被硬推两格，视觉错乱。
.content p 是最直接有效的限定写法
用父容器类名锚定作用域，比依赖 HTML 结构（如 article p）更可控，也比复杂伪类（如 p:not(.title):not(.caption)）更易维护。实操建议：
- 给正文区域外层加明确 class，比如
<main class="content">...</main> - 只写
.content p { text-indent: 2em; }，不加其他修饰符 - 显式重置例外：
.content blockquote p { text-indent: 0; }、.content p:first-child { text-indent: 0; margin-top: 0; } - 避免用
!important覆盖，优先靠选择器权重和顺序控制
富文本插入的 p 标签怎么隔离缩进
从后台粘贴或 WYSIWYG 编辑器生成的 HTML 常带内联样式或高优先级 class，比如 p style="text-indent: 0 !important;"。此时仅靠 .content p 无法覆盖。应对方式：
- 在富文本容器上加专属 class，如
<div class="rich-text">，再写 <code>.rich-text p { text-indent: 0 !important; } - 若必须保留缩进，用包裹 div：
<p></p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill10595" title="htmlppt.skill"><img src="https://img.php.cn/upload/skill/001/246/273/6adaf20d79f23518.jpg" alt="htmlppt.skill" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill10595" title="htmlppt.skill">htmlppt.skill</a> <p>把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。</p> </div> <a href="/xiazai/skill10595" title="htmlppt.skill" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <div class="rich-para">内容</div> <p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>，然后只对.rich-para设缩进 - 导出 PDF 或打印时，检查是否需额外规则：
@media print { .content p { text-indent: 2em; } } - Vue 中若子组件也用了
<p></p>且未加 class，scoped 样式不会命中它——得用::v-deep p或透传 class - React 中若子组件是第三方库（如
react-markdown），它渲染的p不在你 className 控制范围内，需用属性选择器：.content :is(p) { text-indent: 2em; }（现代浏览器支持）或改用[class~="content"] p - 真正安全的做法：正文区域统一用
<article class="article-body"></article>包裹，所有缩进逻辑只绑定到该 class 下
组件化框架里如何让缩进不穿透子组件
Vue 的 <style scoped></style> 和 React 的 CSS Modules 默认不会影响子组件的 p，但容易踩两个坑：
text-indent，而在于确认它只在你预期的 DOM 范围内计算、不被父级 flex/grid 截断、不被富文本的 !important 覆盖、也不意外穿透到子组件的 p 里——每次加完，务必打开开发者工具，看 Computed 面板里目标 p 的 text-indent 值是否是你写的那个数，且 display 是 block。
