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”变为白色。在当前状态下，它保持红色。

我已经尝试了我能想到的任何事情但没有成功，我希望你能帮助我。

谢谢。

score 6 · Accepted Answer

这就是你需要的：

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

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

score 1 · Accepted Answer

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

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

您面临的问题是您的 div 规则blabla比 span 规则绑定得更紧密（即这些规则更具体）。有关规则特异性的更多信息，请参阅 BrainJar.com 上的 CSS 教程“使用样式表”。

score 0 · Accepted Answer

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

#blabla{
  color: black;
}

#blabla:hover{
  color: white;
}

#blabla span:hover{
  color: white;
}

.red{
  color: red;
}

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

3 回答 3