首段不缩进需用 p:first-of-type 重置 text-indent: 0 并清除 margin-top；:first-child 易因前置非 p 元素失效；富文本场景需提高选择器权重或加 !important 确保生效。
如何让首段不缩进但其余段落正常缩进
首段不缩进是中文排版基本规范，直接写 text-indent: 2em 会把所有 p 都缩进，必须用 CSS 选择器精准排除第一个 p。
最稳妥的写法是组合使用 :first-of-type 和显式重置：
-
p { text-indent: 2em; }—— 全局设缩进 -
p:first-of-type { text-indent: 0; margin-top: 0; }—— 精准命中第一个p，同时清掉它默认的上边距（否则顶部留白过大）
注意：:first-of-type 比 :first-child 更可靠。如果首段前面有 h2 或 div，:first-child 就会失效；而 :first-of-type 只看同类型元素中第一个 p，不受兄弟节点干扰。
为什么 p:first-child 经常失效
常见场景：富文本编辑器输出、CMS 模板或手写 HTML 中，p 前面往往夹着 h1、figure、空 div，甚至注释节点。这时 p 不是父容器的第一个子节点，:first-child 完全不匹配。
验证方式：打开开发者工具 → 选中首段 → 查看 Elements 面板里它的父节点下是否真排第一。如果不是，就别硬用 :first-child。
替代方案（仅当结构可控时）：
- 给首段加 class：
<p class="no-indent">...</p>，再写p.no-indent { text-indent: 0; margin-top: 0; } - 用属性选择器：
p:not([data-no-indent="false"]) { text-indent: 2em; }，再给首段加data-no-indent="false"—— 过重，不推荐
缩进生效但首段仍“看起来缩了”的隐藏原因
不是选择器没生效，而是视觉错觉。以下情况会让首段明明 text-indent: 0 却像缩进了：
- 父容器有
padding-left，整块内容左移，首段顶格但相对视口偏右 - 前面浮动元素未清除，后续
p文本绕排，造成“伪缩进”（见clear: both必须加） - 首段内含
img或svg等内联替换元素，text-indent实际作用在该元素左侧，文字从图后开始，显得“空了一截” - 用了
text-align: justify但首行字符数太少，浏览器为拉齐强行撑开字间距，误判为缩进
排查顺序：先关掉所有自定义样式，只留 p:first-of-type { text-indent: 0; }，看是否还“缩”，再逐步开回其他规则定位问题源。
富文本插入场景下的首段处理难点
CMS 或编辑器导出的 HTML 常把内容包在 div class="content" 里，且全局重置过 p 样式（比如强制 text-indent: 0 !important）。这时光靠 :first-of-type 不够。
实操建议：
- 检查 computed 样式中
text-indent最终值是不是0，如果不是，说明被更高权重规则覆盖 - 改用更具体的选择器：
.content > p:first-of-type或.article-body p:first-of-type - 必要时加
!important—— 虽不优雅，但富文本场景下常是最快解法：.content > p:first-of-type { text-indent: 0 !important; margin-top: 0 !important; }
真正难的不是写对选择器，而是确认那段 HTML 到底是谁生成的、有没有隐式重置、是否嵌套在未知容器里——这些细节不摸清，:first-of-type 再标准也白搭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
