邻接的 CSS 选择器答案

【问题标题】：CSS Selector for Adjacency邻接的 CSS 选择器
【发布时间】：2017-07-25 21:47:06
【问题描述】：

似乎 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 class="pizza"> 的兄弟 <div> 之后。

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

div > div.pizza + p

我知道这是不对的。

有人可以指点一下吗？

【问题讨论】：

当前 CSS3 选择器无法实现。
你不能因为.pizza 不是p 元素的兄弟。有no parent selector in CSS3。
如果你需要设置<p>元素的样式，我建议给它们添加一个类，或者给父元素添加一个类，这样你就可以使用.parent > p
这与 CSS 是否具有正确关联性无关。事实上，它不是 - 它实际上是关联的，这在某些情况下很重要。但不是这个，因为div > div.pizza 并不意味着“一个div 的孩子是div.pizza”，它的意思是“一个div.pizza，其父母是div”。此组合子链的右关联解释div > (div.pizza + p) 和左关联解释(div > div.pizza) + p 具有相同的最终含义，因此在这种情况下关联性的方向无关紧要。

标签： css css-selectors

【解决方案1】：

组合器，至少是目前可用的组合器，只能表达两个元素之间的关系。正如您正确观察到的那样，您无法更改组合子的关联性。正因为如此，而且没有父元素与 > 组合子元素对应的事实，不可能构造一个代表 both

的 CSS 选择器

div > div.pizza

和

div + p

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

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

div:has(> div.pizza) + p

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

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

查看我对这些相关问题的回答以了解更多信息：

【讨论】：

【解决方案2】：

您不能（还）使用标准 CSS 选择器选择您选择的 <p>。

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

这是一个例子：

p {
color: rgb(191, 191, 191);
}


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

<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>

进一步阅读 axe 选择器：

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

【讨论】：