p选择器虽可全局设置段落样式，但受优先级、嵌套、框架重置、shadow dom及浏览器默认样式影响，实际生效受限；适用场景极窄，推荐用自定义属性+类名组合替代。
用 p 选择器直接设置所有段落样式，确实可行但有隐含限制
直接写 p { color: red; } 能生效，但实际项目中往往“不等于所有视觉上的段落都会变红”。因为 CSS 优先级、继承、HTML 结构嵌套（比如 p 里套 div 再套 p）都可能让样式被覆盖或不触发。
更关键的是：浏览器默认样式表（user agent stylesheet）对 p 有 margin-top 和 margin-bottom，而很多框架（如 Bootstrap）或重置方案（如 Normalize.css）会主动改写这些值——你写的 p 规则可能只是在“补漏”，而非真正主导。
- 只匹配顶层
p元素，不关心它是否在article、section或blockquote里 - 无法区分语义用途：正文段落、说明文字、错误提示、列表项内的段落，全被一锅端
- 如果页面用了 Shadow DOM（比如 Web Components），
p选择器默认进不去
什么时候该用 p 选择器，什么时候不该
适合场景很窄：纯内容页（如博客正文）、无框架依赖、不需要差异化控制段落间距/字体/行高。比如静态文档生成器输出的 HTML，结构干净，p 就是唯一段落容器。
不适合场景包括：表单内提示文字（常是 <p class="help-text"></p>）、卡片里的描述（常带 class="card-description"）、富文本编辑器输出（可能混用 div 模拟段落）。
- 若需统一控制所有段落外观，优先考虑 CSS 自定义属性 + 类名组合，例如：
:root { --p-color: #333; --p-line-height: 1.6; }，再配合p { color: var(--p-color); line-height: var(--p-line-height); } - 若已有多个类名控制段落（如
.text-sm、.text-muted），硬上p选择器容易引发冲突，尤其当类名带!important时 - 移动端需注意：iOS Safari 对
p的默认font-size有最小限制（有时强制放大），仅靠p { font-size: 14px; }可能无效，得加-webkit-text-size-adjust: 100%;
p 选择器和 * p 的区别你可能没注意
p 只匹配直接是 p 标签的元素；* p 匹配**任何元素内部的 p**，包括 div > p、section p、甚至 p p（虽然语义上不该存在嵌套 p）。后者看似“更全”，实则危险：
- 性能略差：浏览器要遍历所有祖先节点找
p，尤其在深嵌套 DOM 中 - 容易误伤：富文本内容中用户粘贴的 HTML 若含
<p></p> <p>xxx</p>，* p会命中内层那个（非法但真实存在） - 和
html p、body p行为不等价：后者只查一层后代，* p是任意深度
真正需要“所有段落”时，body p 比 * p 更可控，也比裸 p 更明确作用域。
兼容性和 reset 的实际影响
IE8+、所有现代浏览器都支持 p 选择器，不存在兼容问题。但“生效”不等于“表现一致”——不同浏览器对 p 的默认 margin 值略有差异（Chrome 是 1em，Firefox 也是，但旧版 Edge 曾用像素值）。如果你没引入 CSS reset 或 Normalize，直接写 p { margin: 0; } 会导致段落挤在一起，阅读体验反而变差。
- 推荐做法：用
p { margin-block-start: 1em; margin-block-end: 1em; }替代margin: 0;，利用逻辑属性适配书写模式（如从右向左语言） - 若项目已用 Tailwind 或 Bootstrap，它们的
p样式通常已被覆盖，单独写p规则大概率被忽略，得用!important或提高选择器权重（如body p） - 注意伪元素干扰：某些组件库会给
p加::before或::after（比如加图标），此时修改p的color不会影响伪元素颜色，得额外处理
最常被忽略的一点：CSS 的层叠顺序不是按代码位置，而是按选择器特异性。哪怕你把 p { color: blue; } 写在最后，只要前面有 .content p { color: green; }，蓝色就出不来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
