我如何定位一個直接位於另一個div之後的div，並且它們都在同一父div中？

Question

有沒有一種方法可以使用CSS來定位僅在之後出現的.hello？

<div> 
    <div class="hello"></div> 
    <div class="goodbye"></div> 
</div> 

<div> 
    <div class="hola"></div> 
    <div class="goodbye"></div> 
</div> 

<div> 
    <div class="anyoung"></div> 
    <div class="goodbye"></div> 
</div> 

Answer 1

嘗試adjusting sibling選擇

.hello + .goodbye {} 

這個選擇器將只選擇那些.goodbye該立即遵循.hello元件。根據您的需要，您還可以使用general sibling選擇器，如Mary Melody答案中所示。

Answer 2

你可以通過使用CSS這樣~一般同胞選擇實現這一目標：

的jsfiddle - DEMO

.hello ~ .goodbye { 
    color:red; 
} 

的~組合子分隔兩個選擇和匹配第二個 元素只有在它之前第一，和兩個共享一個共同的 父。 - Mozilla MDN

CSS ~一般兄弟選擇目標的所有.goodbye.hello後到來相同的父專區內。

例如：的jsfiddle - DEMO

Answer 3

嘗試這種情況：

Answer 4

可以使用以下方式

.hello + .goodbye { 
    background-color: yellow; 
} 

元素+元件選擇器用於選擇被（未內側）第一指定元件後立即置於元件。