我如何针对一个直接出现在另一个div之后的div，并且它们都在同一个父div中？

Question

有没有一种方法可以使用CSS只针对在.goodbye之后出现的.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

试试调整兄弟姐妹选择器

.hello + .goodbye {}

这个选择器将只选择那些紧跟在.goodbye元素后面的.hello。根据您的需要，您也可以使用普通兄弟姐妹选择器，如Melody答案中提到的。

Answer 2

您可以通过使用CSS ~通用同胞选择器来实现这一点，如下所示：

JSFiddle - 演示

.hello ~ .goodbye {
    color:red;
}

~组合器分离两个选择器，只有在第一个元素之前匹配第二个元素，并且两者共享一个公共父元素。- https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_selectors

CSS ~通用同胞选择器针对同一父div中继.hello之后的所有.goodbye。

例如，： JSFiddle - 演示

Answer 3

试试这个：

.hello + .goodbye {
    color: red;
}