CSS中的上一个相邻选择器 [英] Previous adjacent selector in CSS

问题描述

CSS中是否有方法来定位 div.carrots 之前的每个 p 在这种情况下，我们会获得 。

; p> Munch Munch！< / p>
< div class =carrots>
< / div>

< p> Burp！< / p>
< div class =potatoes>
< / div>

解决方案

没有previous sibling只有相邻和一般组合器需要目标兄弟

为了选择

这种情况下，你可以用一些元素（例如 .container ）和使用 .container p：first-child

 < div class = carrots> 
< p> Munch Munch！< / p> 
< div> 
< / div> 
< / div> 
  

Is there are way in CSS to target every p preceding a div.carrots? In this case we would get Munch but not Burp.

<p>Munch Munch!</p>
<div class="carrots">
</div>

<p>Burp!</p>
<div class="potatoes">
</div>

解决方案

There is no "previous sibling" selector. Only The adjacent and general combinators, which require the target sibling to be after the first.

In order to select <p> in this case, you can surround the contents with some element (say, .container and use .container p:first-child as the selector. I don't think things would be all that different if you did this either:

<div class=carrots>
    <p>Munch Munch!</p>
    <div>
    </div>
</div>

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