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>

我找不到跟随包含<p>的同级<div>的{{1}}的选择器。

我试过这个但是CSS的从右到左的关联性并没有产生我想要的东西：

<div class="pizza">

我知道这是不对的。

有人可以提供指针吗？

Answer 1

组合器，至少是当前可用的组合器，只能表达两个元素之间的关系。正如您所正确观察到的那样，您无法改变组合子的相关性。因此，以及子元素的>组合子没有父对应的事实，不可能构造表示两者的CSS选择器

div > div.pizza

和

div + p

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

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

div:has(> div.pizza) + p

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

目前还不知道这个提议的功能是否会在CSS中实现。

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

Answer 2

您无法使用标准CSS选择器选择所选的<p>。

你可以，但是，部署 ax CSS选择器扩展库，这将使您能够在样式表中选择选择父项的选择器，祖先，以前的兄弟姐妹和远程元素。

以下是一个例子：

＆＃13;

p {
color: rgb(191, 191, 191);
}


.pizza < div + p {
font-weight: bold;
font-size: 24px;
color: rgb(255, 0, 0);
}

＆＃13;

<div>
   <div class="pizza"></div>
</div>
<p>Select me!  Select me!</p>

<div>
   <div class="pizza">
      <p>Do NOT select me!</p>
   </div>
</div>

<script src="https://rouninmedia.github.io/axe/axe.js"></script>

＆＃13;

进一步阅读 ax 选择器：

http://www.rounin.co.uk/projects/axe/axe2.html

邻接的CSS选择器

2 个答案: