CSS 邻接选择器

Question

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>

我无法找出包含 a 的<p>兄弟姐妹之后的a 选择器。<div><div class="pizza">

我尝试了这个，但是 CSS 从右到左的关联性并没有产生我想要的结果：

div > div.pizza + p

我知道这是不对的。

有人可以指点一下吗？

Answer 1

组合器，至少是当前可用的组合器，只能表达恰好两个元素之间的关系。正如您所观察到的，您无法更改组合器的关联性。因此，并且事实上子元素的组合器没有对应的父元素>，因此不可能构造一个同时代表两者的CSS 选择器

\n\n

div > div.pizza\n

和

\n\n

div + p\n

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

\n\n

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

\n\n

div:has(> div.pizza) + p\n

其中p是最外层选择器的主题。相对选择器的作用域> div.pizza本质上是第一个选择器 \xe2\x80\x94，这是上面前两个复杂选择器的组合，伪类的作用就像任何其他简单选择器一样。div:has()

\n\n

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

\n\n

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

\n\n

\n