悬停元素会更改其他元素

Question

我正在练习我的css使用悬停当我发现这个问题时，当我悬停在顶部时颜色将变为蓝色，中间将变为红色但是当我将鼠标悬停在中间时，中间会将颜色变为红色但是顶级遗骸。

我试图在中间添加一个！important：悬停，但它没有用。我也删除+符号，但我认为它不会起作用，因为它应该在同一个div上才能工作。

当中间div悬停时，为什么悬停不适用于顶级div？

HTML

<div class="top">
    <p> HELLO WORLD </p>
</div>

<div class="middle">
    <p> HELLO PEOPLE </p>
</div>

CSS

.top:hover + .middle {
    color:red;
}

.top:hover {
    color:blue;
}

.middle:hover {
    color:red;
}

.middle:hover + .top {
    color: blue;
}

FIDDLE HERE

Answer 1

不幸的是，您无法在CSS中选择父元素。但JavaScript可以用来解决这个问题。

有关选择器的详细信息，请查看此内容... http://www.w3.org/TR/CSS21/selector.html

Answer 2

CSS +选择器是下一个兄弟选择器。它不适用于以前的兄弟姐妹，类似于你不能从孩子那里瞄准父母。这是因为CSS工作在Top-Bottom，（即父＆gt;孩子，下一个兄弟等），反之亦然。

这个article解释了为什么CSS没有父选择器，但同样的逻辑适用于缺少先前的兄弟选择器。

tldr：自下而上的CSS选择器因其在浏览器中的性能影响而不可行。