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

尝试adjusting sibling选择器

.hello + .goodbye {}

此选择器将仅选择立即跟随.goodbye元素的.hello。根据您的需要，您还可以使用general sibling选择器，就像Mary Melody的回答中所示。

Answer 2

您可以通过使用CSS ~一般兄弟选择器来实现这一目标：

JSFiddle - DEMO

.hello ~ .goodbye {
    color:red;
}

~组合子分隔两个选择器并匹配第二个选择器元素只有在第一个元素之前，并且两者共享一个共同元素家长。 - Mozilla MDN

CSS ~一般同级选择器定位同一父div中.goodbye之后的所有.hello。

例如： JSFiddle - DEMO

Answer 3

试试这个：

.hello + .goodbye {
    color: red;
}

Answer 4

您可以使用以下方式

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

元素+元素选择器用于选择紧跟在第一个指定元素之后（而不是在其中）的元素。

我如何定位直接来自另一个div的div并且它们都在同一个父div中？

4 个答案: