css - css 中的优先级问题

Question

抱歉，标题不够准确，我真的不知道该写什么。

html :

<div id="blabla">
  hello
  <span class="red">hello2</span>
</div>

CSS:

#blabla{
  color: black;
}

#blabla:hover{
  color: white;
}

.red{
  color: red;
}

当鼠标悬停在 div“blabla”上时，我希望字符串“hello2”变白。在当前状态下，它保持红色。

我已经尝试了所有我能想到的方法，但没有成功，我希望你能帮助我。

谢谢。

Answer 1

这是你需要的:

#blabla:hover .red {
  color: white;
}

看看:http://jsfiddle.net/4xhqc/

问题是即使选择器 #blabla:hover 比 .red 更具体，.red 应用于元素问题本身 - 这使得它具有优先权。