html - 相邻的 sibling 不工作 - 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*/
}

如何实现？如果是 child ( child )，我需要定位相邻的 sibling 。这仅用于学习目的。

Answer 1

+ 指的是邻居元素而不是子元素。

如果你想要它需要像这样:

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

---

或:

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

---

编辑:如何定位 child 中相邻的 sibling :

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