CSS :hover removes all other styles from parent container

Question

正如我在 this pen 中展示的那样，我遇到了一个链接的悬停样式问题，它带走了它所在的 div 的样式。但是，如果我更改 #div div {background-color:blue 上的样式，问题就会消失; } 到 div {background-color:blue; 。

Answer 1

只需删除 CSS 中的第二个 div。您的问题是由 #div div 引起的，在 CSS 中，它实际上意味着 div INSIDE 是父 div。现在你还没有。

#div {
  background-color: blue;
}
a:hover {
  color: red;
}

<div id="div">
  <a>Yo!</a>
</div>