問(wèn)題描述

似乎 CSS 是右關(guān)聯(lián)的，并且與編程語(yǔ)言不同，您不能用括號(hào)來(lái)影響它.

我有這個(gè)一般結(jié)構(gòu):

<div class='pizza'></div></div><p>選擇我！選擇我！</p>
<div class="披薩"><p>不要選擇我！</p></div></div>

我無(wú)法找出一個(gè) <p> 的選擇器，該選擇器跟隨一個(gè)包含 <div class=" 的兄弟 <div>比薩">.

我試過(guò)這個(gè)，但 CSS 的從右到左的關(guān)聯(lián)性并沒(méi)有產(chǎn)生我想要的:

div >div.pizza + p

我知道這是不對(duì)的.

有人可以指點(diǎn)一下嗎?

組合器，至少是目前可用的組合器，只能表達(dá)兩個(gè)元素之間的關(guān)系.正如您正確觀察到的那樣，您無(wú)法更改組合子的關(guān)聯(lián)性.正因?yàn)槿绱?，而且沒(méi)有父元素對(duì)應(yīng)于子元素的 > 組合子，所以不可能構(gòu)造一個(gè) CSS 選擇器來(lái)表示 both

div >div.pizza

和

div + p

每個(gè)選擇器中的第一個(gè) div 代表相同的元素.

這個(gè)關(guān)聯(lián)性問(wèn)題可以使用建議的 :has() 偽類來(lái)解決，它在功能性偽類中為您提供了相對(duì)選擇器語(yǔ)法，允許您將這樣的選擇器構(gòu)造為

div:has(> div.pizza) + p

其中 p 是最外層選擇器的主題.相對(duì)選擇器 >div.pizza 是 范圍 到第一個(gè) div 選擇器——本質(zhì)上，這是上面前兩個(gè)復(fù)雜選擇器的組合，:has() 偽類的作用與任何其他簡(jiǎn)單選擇器一樣.

目前尚不清楚這個(gè)提議的功能是否會(huì)在 CSS 中實(shí)現(xiàn).

查看我對(duì)這些相關(guān)問(wèn)題的回答以了解更多信息:

• CSS 選擇器中是否允許使用括號(hào)?
• 如何使用CSS根據(jù)頁(yè)面中另一個(gè)元素的狀態(tài)選擇一個(gè)元素?

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

I have this general structure:

<div>
   <div class='pizza'></div>
</div>
<p>Select me!  Select me!</p>

<div>
   <div class="pizza">
      <p>Do NOT select me!</p>
   </div>
</div>

I can't figure out the selector for a <p> that follows a sibling <div> containing a <div class="pizza">.

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

div > div.pizza + p

I know this isn't right.

Can someone offer a pointer?

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

and

div + p

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

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

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.

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

See my answers to these related questions for more info:

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

這篇關(guān)于鄰接的 CSS 選擇器的文章就介紹到這了，希望我們推薦的答案對(duì)大家有所幫助，也希望大家多多支持html5模板網(wǎng)！