相邻的 CSS 选择器

看起来 CSS 是右结合的，与编程语言不同，你不能用括号来影响它。

我有这样的一般结构:

<div>
   <div class='pizza'></div>
</div>
<p>Select me!  Select me!</p>

<div>
   <div class="pizza">
      <p>Do NOT select me!</p>
   </div>
</div>

我想不出 <p> 的选择器在 sibling 之后 <div>包含 <div class="pizza"> .

我试过了，但是 CSS 的从右到左的关联性没有产生我想要的结果:

div > div.pizza + p

我知道这是不对的。

谁能指点一下？

最佳答案

组合器，至少是目前可用的组合器，只能表达恰好两个元素之间的关系。正如您正确观察到的那样，您无法更改组合器的关联性。正因为如此，以及没有与子元素的 > 组合器相对应的父对象，不可能构造一个表示两者

div > div.pizza

和

div + p

每个选择器中的第一个 div 代表相同的元素。

这个关联性问题可以使用提议的:has() 伪类来解决，它为您提供了一个函数式伪类中的相对选择器语法，允许您构造这样的选择器

div:has(> div.pizza) + p

其中 p 是最外层选择器的主题。相对选择器 > div.pizza 是 scoped到第一个 div 选择器——本质上，这是上面前两个复杂选择器的组合，其中 :has() 伪类的行为与其他任何一样简单的选择器。

尚不清楚这个提议的功能是否会在 CSS 中实现。

有关更多信息，请参阅我对这些相关问题的回答:

关于相邻的 CSS 选择器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29757133/