这两个div的工作原理如何：悬停div和div：hover + div？

Question

我尝试了这两种方法，但两者都是一样的。

div:hover div
{
.....
}

div:hover + div
{
.....
}

这些之间还有什么区别吗？

Answer 1

div:hover div将在h div 中设置div 内的样式：

<div>
  I'm hovered.

  <div>
    So I'm styled.
  </div>
</div>

div:hover + div会对div 跟随悬停的div设置样式：

<div>
  I'm hovered.
</div>
<div>
  So I'm styled.
</div>

div {
  border: 1px solid #000;
  padding: 3px;
}

div.styleinner:hover div {
  background-color: red;
}

div.stylenext:hover + div {
  background-color: red;
}

<div class="styleinner">Hover me
  <div>and I get styled</div>
</div>
<div>but I won't</div>

<div class="stylenext">Hover me
  <div>and I won't get styled</div>
</div>
<div>but I will</div>