似乎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>包含< div class =“pizza”>.
我试过这个但是CSS的从右到左的关联性并没有产生我想要的东西：
div > div.pizza + p
我知道这不对.
有人可以提供指针吗？
解决方法
组合器,至少是当前可用的组合器,只能表达两个元素之间的关系.正如您所正确观察到的那样,您无法改变组合子的相关性.因此,以及>没有父对应的事实.用于子元素的组合器,不可能构造一个表示两者的CSS选择器
div > div.pizza
和
div + p
其中每个选择器中的第一个div表示相同的元素.
这个关联性问题可以使用提出的解决方案来解决：has()伪类,它在函数伪类中为您提供相对选择器语法,允许您构造这样的选择器
div:has(> div.pizza) + p
其中p是最外层选择器的主题. <相对选择器> div.pizza是scoped到第一个div选择器 – 本质上,这是上面两个复杂选择器的组合,其中：has()伪类就像任何其他简单选择器一样.
目前尚不清楚这个提议的功能是否将在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?
