应优先使用 p:only-of-type 而非 p:only-child，因后者要求父元素下除该 p 外不能有任何节点（包括空白文本节点），而实际 dom 常含换行、注释等；前者仅要求无其他 p 标签，更符合真实场景。
为什么写了 p:only-child { text-align: center; } 却没居中？
因为 :only-child 判断的是「父元素子节点总数是否严格等于 1」，而 HTML 源码里的换行、缩进、空格甚至 Vue/React 注释都会生成 #text 节点。浏览器 DevTools 里右键父元素 → “Edit as HTML”，常能看到一堆看不见的空白节点，导致 childNodes.length !== 1，选择器直接失效。
:only-child 和 :only-of-type 到底该选哪个？
绝大多数“单子元素居中”场景，真正要的是 :only-of-type：
-
p:only-child：父元素下**不能有任何其他节点**（包括<span></span>、<!-- comment -->、换行符）—— 实际几乎不可控 -
p:only-of-type：父元素下**没有别的p标签**，但允许有div、img、注释、空白—— 更贴近真实 DOM 结构 - 比如
<div> <p>内容</p> <!-- loading --> </div>，p:only-of-type仍生效，p:only-child失效
怎么写才能让单个子元素真正居中？
优先用 :only-of-type 配合块级居中逻辑：
.card > p:only-of-type {
display: block;
margin: 0 auto;
max-width: 600px;
}
如果必须用 :only-child（比如你完全控制 HTML 输出，且能保证无空白）：
- 手写 HTML 时删掉换行和缩进：
<div><p>内容</p></div>，而非多行格式 - 服务端模板（如 Nunjucks/Twig）启用
trim_blocks和lstrip_blocks - 构建工具（如 Vite/webpack）加 HTML 压缩插件，移除空白文本节点
居中不只是 text-align: center
文字居中 ≠ 元素居中，得看上下文：
- 纯文本段落：
text-align: center足够 - 图片或卡片：
display: flex; justify-content: center;或margin: 0 auto;（需设width或max-width） - 内联元素（如
span）：text-align: center必须作用在父容器上，不能直接写在span:only-child - Flex 容器子项：
:only-child不影响justify-content，它只管样式匹配，不改布局逻辑
真正容易被忽略的，是 DOM 节点构成和居中方式的耦合——你以为在控制样式，其实是在和浏览器解析 HTML 的细节较劲。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
