应使用 p:first-of-type 重置首个段落缩进，而非 :first-child；需加父级前缀（如 body）提升优先级，并确保页面存在多个 p 元素。
用 :first-of-type 选择首个 p 并取消缩进
默认用 text-indent 统一缩进所有段落时，第一个段落也会被影响。最直接的办法是给所有 p 加缩进，再单独重置第一个——但别用 :first-child，它依赖父容器中第一个子元素是否为 p，而实际 HTML 常在 p 前有 h1、div 等，导致失效。
应该用 p:first-of-type，它只看同类型（p）元素中的顺序：
body p {
text-indent: 2em;
}
body p:first-of-type {
text-indent: 0;
}
注意两点：一是选择器要具体（比如加 body 前缀），避免被其他样式覆盖；二是确保 HTML 中确实有多个 p，否则 :first-of-type 不会生效。
遇到 <blockquote></blockquote> 或标题后 p 不生效？检查 DOM 结构
如果页面顶部是 <h1></h1>，接着是 <p></p>，那这个 p 就是第一个 p 元素，:first-of-type 能命中。但如果开头是 <div class="hero"><p>...</p></div>，而正文的 p 在另一个容器里，那两个 p 属于不同父级，各自都算“第一个”，结果可能多个 p 都没缩进。
- 用浏览器开发者工具检查目标
p的实际父容器和兄弟节点 - 必要时改用更精确的选择器，比如
.article-content p:first-of-type - 避免把首段包在额外的 wrapper
div里，除非有意隔离样式作用域
用 CSS 自定义属性控制缩进逻辑更灵活
如果项目中多个区域都要实现“首段不缩进”，硬写多次 :first-of-type 容易漏或难维护。可以抽成 CSS 变量 + 通用类：
.text-block {
--indent: 2em;
}
.text-block p {
text-indent: var(--indent);
}
.text-block p:first-of-type {
text-indent: 0;
}
这样只需给任意容器加 class="text-block"，内部段落就自动遵循规则。变量还能动态改，比如响应式下小屏设为 --indent: 1em，不影响首段逻辑。
别忽略换行符和空格带来的“伪首段”
有时视觉上第一个段落没缩进，但其实是它前面有个看不见的空 p 或带空白文本的 p，导致真正的首段变成了第二个 p，被 :first-of-type 跳过了。
排查方法：
body p {
outline: 1px dashed red; /* 临时加边框看清每个 p 范围 */
}
常见诱因包括：
- 模板引擎（如 Jinja、EJS）生成了空行并渲染成空
p - 富文本编辑器导出 HTML 时保留了无意义的空段落
- JavaScript 动态插入内容前，DOM 已存在隐藏的空白节点
真正起作用的永远是浏览器解析后的 DOM 结构，不是你写的源码缩进或换行。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
