h2 + p 没生效是因为 DOM 结构不满足「紧邻+同父」条件：h2 与 p 不在同一父容器、中间存在文本节点、顺序写反，或 p 被嵌套在子元素中；应检查 Elements 面板确认真实结构。
h2 + p 为什么没生效？先确认 DOM 结构是否满足「紧邻+同父」
相邻兄弟选择器 h2 + p 只匹配紧挨在 h2 后面、且与它共享同一父元素的**第一个 p**。常见失效不是语法错，而是结构不达标：
-
h2和目标p不在同一个父容器里（比如p被包进了section或div） - HTML 中
h2和p之间存在注释、换行、空格文本节点——CSS 不忽略这些，只要 DOM 树上不是直接父子同级关系，就不算「紧邻」 - 顺序写反了，用了
p + h2却想控制h2后面的p
想选中标题后所有段落？改用通用兄弟选择器 ~
如果目标是统一设置标题后所有同级 p 的样式（比如统一缩进或背景色），h2 ~ p 更合适。它不要求「紧邻」，只要求：同父、在 h2 后面、类型匹配。
-
h2 + p：只命中第一个p，适合做「标题正下方说明文字」的特殊处理 -
h2 ~ p：命中所有后续同级p，适合批量控制，但要注意它不跨父容器，也不会选中嵌套在子元素里的p - 两者权重相同，无性能差异，选哪个取决于语义意图
DOM 中有包裹层？别硬套 +，换思路加 class 或调整结构
当 HTML 是 <h2>标题</h2><div><p>内容</p></div> 这类结构时，h2 + p 必然失效——p 的父元素是 div，不是 h2 的兄弟。
- 最轻量解法：给那个
p加 class，比如<p class="subtitle">，然后用.subtitle直接控制 - 更语义化解法：把
div去掉，让p和h2真正同级；或把标题也放进容器，统一用后代选择器如.article > h2 + p - 避免用
h2 ~ p强行兜底——它可能误中其他无关p，尤其在复杂布局中
Shadow DOM 或伪元素场景下，+ 完全无效
+ 选择器无法穿透 Shadow DOM 边界。如果标题或段落在自定义组件的 shadowRoot 里，外部 CSS 中的 h2 + p 不会生效。
立即学习“前端免费学习笔记（深入）”；
- 组件内样式必须写在
:host或shadowRoot内部的<style>中 -
::before、::after等伪元素不是真实 DOM 节点，不能参与兄弟关系计算，所以h2 + ::before是非法语法 - 现代浏览器（IE7+）对
+支持完善，兼容性不是问题，但 Shadow DOM 和伪元素限制常被忽略
h2 和 p 是否真的同级且中间无节点——这是判断 + 能否起效的唯一依据。 
