p内可直接用后代选择器（如p a）样式行内元素，但不可嵌套块级元素，否则浏览器自动修正DOM结构；推荐加类名精准控制样式，避免全局污染与继承陷阱。
直接给 p 里的子元素写选择器就行
不需要特殊“开启嵌套支持”——p 标签本身允许嵌套 strong、em、a、span 等行内元素，CSS 可以直接通过后代选择器或子选择器定位它们。
比如想让所有段落里的链接变成深蓝色且无下划线：
p a {
color: #2c3e50;
text-decoration: none;
}
注意：不能用 p > a（子选择器）强制要求 a 必须是 p 的**直接子元素**，因为实际 HTML 中 a 常被包在 span 或 em 里，用空格的后代选择器更稳妥。
p 里不能嵌套块级元素，否则样式会失效或结构错乱
浏览器遇到非法嵌套（比如 p 里写了 div、h2、p 自身）时，会自动闭合前面的 p，再开新标签——这会导致 DOM 结构和你写的不一致，CSS 选择器自然就“找不到目标”了。
立即学习“前端免费学习笔记（深入）”；
- ❌ 错误写法：
<p>文字<div>被吞掉的div</div>后续文字</p>→ 浏览器解析成<p>文字</p><div>被吞掉的div</div><p>后续文字</p> - ✅ 正确替代：
<p>文字<span class="note">备注内容</span>后续文字</p>，再用p .note控制样式 - 如果真需要块级布局，用
div+ CSS 设置display: block或语义化标签如section，别硬塞进p
用类名隔离样式，避免全局污染 p 的默认行为
直接写 p strong 会影响所有段落里的 strong，但很多时候你只想改某类段落（比如文章正文、提示框、错误信息）里的内联元素。这时候加类名最安全：
<p class="article-paragraph">这是正文，<em>斜体强调</em>要浅灰</p> <p class="error-message">出错了：<code>404</code> 请检查路径</p>
对应 CSS：
.article-paragraph em { color: #666; }
.error-message code { background: #fdd; padding: 2px 4px; }
这样既清晰又不会误伤其他地方的 p 内容。
多层嵌套时注意继承与层叠优先级
CSS 继承对某些属性（如 color、font-family）有效，但像 margin、padding、display 不继承。如果你发现 p span a 没生效，先检查是否被更高优先级规则覆盖（比如行内 style 或 ID 选择器）。
常见排查点：
- 打开浏览器开发者工具，看 computed 样式里该元素最终生效的是哪条规则
- 检查是否有
!important干扰，尤其来自第三方 CSS - 确认父级
p没设font-size: 0之类导致子元素文字“消失”（其实是缩到看不见） - 避免过度嵌套选择器，如
p.content > span.highlight > em.urgent—— 维护难，且性能略差
真正复杂的需求（比如每段首行特殊样式、跨多段的高亮逻辑），靠纯 CSS 很难稳定实现，该上 JavaScript 就上，别硬扛。
