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也会应用于问题本身 - 这会使它优先。

Answer 2

您可以将最终的CSS规则更改为：

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

您遇到的问题是div blabla的规则比span规则更严格（即这些规则更具体）。有关规则特异性的更多信息，请参阅BrainJar.com上的CSS教程"Using Style Sheets"。

Answer 3

您还需要指定跨度元素悬停更改：

#blabla{
  color: black;
}

#blabla:hover{
  color: white;
}

#blabla span:hover{
  color: white;
}

.red{
  color: red;
}

如果您希望该div中的所有元素都变为白色，那么请使用*选择器，但是时间指定每个元素的实现更有意义。