相鄰兄弟姐妹不工作-CSS3選擇器

Question

我想對子元素進行:hover更改。

假設我有以下HTML：

<div class="wrap">
    <div class="adjacent_sibling">Placeholder text</div>
    <div class="adjacent_sibling class">Placeholder text</div>
</div>

我可以使用CSS對子元素進行更改，如下所示：

.wrap:hover .class {
/*CSS to come here*/
}

但我不能像這樣進行更改：

.wrap:hover + .wrap > .adjacent-sibling{
/*CSS to come here*/
}

要么：

.wrap:hover + .adjacent-sibling {
/*CSS to come here*/
}

如何做到這一點？ 如果是孩子（孩子），則需要定位相鄰的兄弟姐妹 。 這僅用於學習目的。

Answer 1

+表示鄰居元素，而不是子元素。

如果您希望它是這樣的：

.wrap:hover > .adjacent-sibling,
.wrap > .adjacent-sibling {
/*CSS to come here*/
}

---

要么：

.wrap:hover > .adjacent-sibling {
/*CSS to come here*/
}

---

編輯：如何針對孩子中的相鄰兄弟姐妹：

.wrap:hover > .adjacent-sibling + .adjacent-sibling.class {
/*CSS to come here*/
}