:has()伪选择器失效求助：Quarto中Reveal.js的CSS样式调整

核心问题：相邻兄弟选择器的匹配条件未满足 #

:has(+ p) 生效的前提是 div.cell 和目标 <p> 必须是同一父元素下的直接相邻兄弟元素。你的情况大概率是 Quarto 生成的 HTML 结构中，div.cell 和后续的 <p> 之间插入了其他元素（比如排版用的容器、辅助节点），导致 + 相邻兄弟选择器无法匹配，进而让 :has(+ p) 失效。

举个实际可能的结构例子：

<section class="slide">
  <div class="cell">...</div>
  <div class="quarto-layout-spacer"></div> <!-- 中间的额外元素 -->
  <p>你要匹配的段落</p>
</section>

这种情况下，div.cell + p 根本找不到对应的 <p>，:has(+ p) 自然不会生效。

排查和修复步骤 #

1. 查看真实DOM结构：按F12打开Firefox开发者工具，定位到目标div.cell，检查它的父元素下，紧接的下一个元素是否为<p>——大概率不是。
2. 调整选择器：
   • 如果<p>是div.cell的后续兄弟（非直接相邻），改用通用兄弟选择器：div.cell:has(~ p)
   • 如果结构层级更复杂，比如<p>在div.cell父元素的兄弟节点里，需要根据实际层级改写选择器，比如.slide:has(.cell) p（具体需匹配你的真实DOM结构）
3. 验证:has本身可用性：先写测试规则div.cell:has(+ *) { outline: 2px solid red; }，如果div.cell有后续兄弟元素就会显示红框，以此确认:has在当前环境正常工作。

内容的提问来源于stack exchange，提问作者dufei