h2:has(+ p) 是合法写法，因 + p 是相对选择器，需依附于前置主选择器；孤立写 :has(+ p) 语法错误。它匹配紧邻后跟 的 ，中间不能有其他节点。
为什么 :has(+ p) 不能直接写成那样
因为 :has() 的参数必须是一个**相对选择器列表**，而 + p 单独出现时，前面缺少锚定的主选择器——+ 是二元操作符，它左边必须有明确的上下文元素。你不能在 :has() 里孤立地写 + p，浏览器会报语法错误：Invalid selector: :has(+ p)。
h2:has(+ p) 才是合法且有效的写法
要选中「后面紧邻一个 p 元素」的 h2，必须把 h2 放在 :has() 前面，括号里写 + p 表示“这个 h2 后面紧跟着一个 p”：
h2:has(+ p) {
margin-bottom: 0.5rem;
}
- ✅ 匹配
<h2>标题</h2> <p>内容</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="overflowclass">CSS婚礼策划服务机构宣传网站模板</a> <p class="overflowclass">CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p> </div> <a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>中的h2 - ❌ 不匹配
<h2>标题</h2> <div>分隔</div> <p>内容</p>（中间有div） - ❌ 不匹配
<p>内容</p> <h2>标题</h2>（顺序反了） - ⚠️ 注意：Vue/React 渲染后可能插入注释节点（如
<!--v-if-->），导致 DOM 中h2和p不再紧邻，:has(+ p)失效
想选中所有「后面有 p」的标题，但不局限于 h2
可以用属性选择器或通配，但需注意语义和权重：
-
[role="heading"]:has(+ p)—— 依赖 ARIA 属性，需确保 HTML 正确标注 -
section > *:is(h1, h2, h3):has(+ p)—— 限定在section直接子元素中匹配多级标题 -
article > :where(h1, h2, h3):has(+ p)——:where()降低权重，避免覆盖已有样式
不要用 *:has(+ p)，它会匹配到所有满足条件的元素（包括 div、span 等），污染范围过大，调试困难。
替代方案：不用 :has() 也能解决的场景
如果只是想控制标题和段落之间的间距，更稳定的做法是直接给 p 设上边距：
h2 + p {
margin-top: 0.75rem;
}
这种写法兼容性更好（IE7+），不依赖 :has()，也不受动态插入节点影响。只有当你需要「基于后续兄弟反向控制当前标题自身样式」（比如加图标、改颜色、隐藏等），才必须用 :has(+ p)。
真正容易被忽略的是：DOM 节点是否真的紧邻——不是看 HTML 源码换行，而是看 Elements 面板里两个节点之间有没有其他 node（哪怕只是文本节点或注释）。这点在框架渲染后尤其关键。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
