邻接的CSS选择器 [英] CSS Selector for Adjacency

问题描述

似乎CSS是正确的关联，不像编程语言，你不能用括号来影响这个。

It seems CSS is right associative, and unlike programming languages, you cannot influence this with parentheses.

我有这个一般结构：

<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> / code> 后面的 c $> / code>后面的后面加上< div class =pizza> 。

我试过这个，但CSS的从右到左的结合性不能产生我想要的：

I tried this but the right-to-left associativity of CSS does not yield what I want:

div > div.pizza + p

我知道这是不对的。

有人可以提供指针吗？

推荐答案

只表达两个元素之间的关系。正如你正确观察到的，你不能改变组合器的关联性。因为这一点，并且事实上对于子元素的> 组合器没有父对应物，所以不可能构造表示两者的CSS选择器

Combinators, at least the ones that are currently available, can only express a relationship between exactly two elements. As you've correctly observed, you cannot change the associativity of combinators. Because of this, and the fact that there is no parent counterpart to the > combinator for child elements, it is not possible to construct a CSS selector that represents both

div > div.pizza

和

div + p

其中第一个 / code>在每个选择器中表示相同的元素。

where the first div in each selector represents the same element.

这个关联性问题可以使用提出的：has code>伪类，它在函数伪类中为你提供相对的选择器语法，允许你构造这样的选择器

This associativity issue can be solved using the proposed :has() pseudo-class, which provides you with a relative selector syntax within a functional pseudo-class, allowing you to construct such selectors as

div:has(> div.pizza) + p

$ c> p 是最外层选择器的主题。相对选择器> div.pizza 是范围到第一个 div selector - 本质上，这是上面两个复杂选择器的组合，：has（）伪类类似任何其他简单的选择器。

where p is the subject of the outermost selector. The relative selector > div.pizza is scoped to the first div selector — essentially, this is a combination of both of the first two complex selectors above, with the :has() pseudo-class acting just like any other simple selector.

目前还不知道这个建议的功能将在CSS中实现。

It is not known yet if this proposed feature will be implemented in CSS.

有关详情，请参阅我对这些相关问题的解答：

See my answers to these related questions for more info:

• 
  
stackoverflow.com/questions/28708741/how-do-i-select-an-element-based-on-the-state-of-another-element-in-the-page-wit\">如何选择基于元素在CSS中的另一个元素的状态？

• Are parentheses allowed in CSS selectors?
• How do I select an element based on the state of another element in the page with CSS?

这篇关于邻接的CSS选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！