本文详解如何精准选择位于特定 h2 元素正后方的同级 p 元素，涵盖传统相邻兄弟选择器（+）的适用场景、:has() 伪类的现代解决方案，以及浏览器兼容性与使用注意事项。
本文详解如何精准选择位于特定 h2 元素正后方的同级 p 元素，涵盖传统相邻兄弟选择器（+）的适用场景、`:has()` 伪类的现代解决方案，以及浏览器兼容性与使用注意事项。
在 HTML 结构中，若需样式化紧跟在某个 <h2> 后面的 <p> 元素（二者为同级兄弟关系），CSS 提供了明确且高效的定位方式。
首先需明确：.test < p 是无效语法——CSS 中没有 < 这样的“子元素之后”选择符；而 .test + p 是正确且常用的相邻兄弟选择器（adjacent sibling combinator），它会匹配紧邻 .test 元素之后的同级 <p> 元素。例如：
<div> <h2 class="test">标题</h2> <p>这段文字将被选中 ✅</p> <p>这段不会被选中 ❌（不紧邻）</p> </div>
对应 CSS：
.test + p {
color: #2563eb;
font-weight: 500;
}该写法简洁、语义清晰，且兼容性极佳（支持所有现代浏览器及 IE8+）。
立即学习“前端免费学习笔记（深入）”；
但需注意：.test + p 仅要求 p 是 .test 的下一个同级兄弟元素，并不限定其是否为父容器的“第一个子元素”或“直接子元素”。若你的结构中 h2 和 p 并非严格相邻（中间可能有注释、空格文本节点等），或你需要更精确地控制作用域（如仅影响某 div 内部的该组合），可结合 :has() 伪类增强逻辑表达力：
/* 仅当 div 内存在 .test 时，才对其中紧邻其后的 p 应用样式 */
div:has(.test) > .test + p {
background-color: #f0f9ff;
}⚠️ 注意事项：
- :has() 是 CSS Selectors Level 4 的新特性，Chrome 105+、Firefox 121+、Safari 15.4+ 已支持，但旧版浏览器（如 IE、早期 Edge）不支持，生产环境使用前请评估目标用户浏览器分布；
- :has() 内部不可包含伪元素（如 ::before）或某些动态伪类（如 :focus-within 在部分实现中受限）；
- 若仅需基础相邻控制，优先使用 .test + p —— 更轻量、更可靠、无需考虑兼容性降级。
✅ 总结：
- ✅ 推荐首选：.test + p —— 简洁、高效、广泛兼容；
- ✅ 进阶可控：div:has(.test) .test + p —— 显式限定上下文，提升选择精度；
- ❌ 避免误用：.test < p（语法错误）、.test ~ p（通用兄弟选择器，不保证“紧邻”）。
掌握这两种方式，即可灵活应对各类“指定元素后首个兄弟”的样式需求。
