h2 + p未生效的根本原因是DOM结构不满足“紧邻+同父”条件，常见于h2与p不同父、中间存在注释/文本节点或HTML顺序错误，需通过Elements面板确认二者是否真为同级且无间隔节点。
h2 + p 为什么没选中目标段落
根本原因不是选择器写错了，而是 DOM 结构不满足「紧邻 + 同父」两个硬条件。浏览器对 + 的实现非常严格，但也很稳定——问题几乎总出在 HTML 上。
常见失效场景：
-
h2和p不在同一个父元素里（比如p被套进了<section>或<div class="content">） -
h2后面实际是注释节点（<!-- v-if -->）、空<span></span>或文本节点（哪怕只是换行缩进产生的空白） - HTML 顺序写反了，比如写了
p + h2却想控制h2后面的p
检查方法：打开开发者工具 Elements 面板，展开父容器，确认两个元素是否真为同级、中间无任何其他节点（包括注释和文本节点）。
div + p 匹配失败时优先查这三件事
别急着改 CSS，先验证结构是否成立。很多团队误以为“视觉上挨着就匹配”，但 + 只看 DOM 树，不看渲染结果。
立即学习“前端免费学习笔记（深入）”；
必须同时满足：
- 左边选择器（如
div）匹配到的元素，其nextSibling节点必须是右边选择器（如p）匹配的元素类型 - 二者
parentNode相同，且都是该父节点的直接子节点（children，不是childNodes） - 中间不能有其他元素节点——
display: none的元素会被排除在兄弟链外，但visibility: hidden的仍参与匹配
Vue/React 项目尤其要注意：框架注入的注释节点（如 <!--v-model-->）会直接打断相邻关系。
input[type="checkbox"] + label 怎么联动控制样式
这是 + 最典型的无 JS 应用场景，依赖表单控件的状态变化驱动后续元素样式。
关键点：
-
input和label必须同级、紧邻，且input在前（label不能包裹input，否则不是兄弟而是后代） - 状态伪类（如
:checked）只能作用于input自身，但通过+可以把效果“传导”给紧邻的label - 示例：
input[type="checkbox"]:checked + label { color: #007bff; font-weight: bold; }，仅当 checkbox 被勾选且后面紧跟label时生效
注意：+ 无法反向操作（比如 label:checked + input 是无效的），也不能跨层级影响子元素。
+ 和 ~ 的区别不是“强弱”，而是“精度”
很多人纠结该用哪个，其实核心是语义需求：你要控制“下一个”，还是“后面所有”？
对比行为：
-
h2 + p：只命中紧跟在某个h2后面的第一个p，哪怕页面有十个h2，也最多匹配十个p -
h2 ~ p：命中所有位于任意h2后面的p，中间隔div、img都不影响，但要求同父 - 链式写法如
li + li + li理论可行，但可读性差，实际推荐用li:nth-of-type(n+3)替代
真正容易被忽略的是：两者都对 DOM 结构变动极度敏感。加一个 wrapper 容器、抽离一段内容到组件内、甚至 SSR 渲染时插入的空白文本节点，都会让它们突然失效——这不是 bug，是设计使然。
