a:悬停不工作

Question

HTML

  <table width="100%">
<tr>
    <td width="90%"></td>
    <td><a href="#" id="logout"><strong>Logout</strong></a></td>
 </tr>
</table>

CSS

 @charset "utf-8";
/* CSS Document */

#logout {
color:#BBB;
}

a:hover {
color:#FFF;
}

虽然注销的颜色似乎是 css 中给出的颜色，但当我将鼠标放在链接上时颜色不会改变 （变为白色） 。是什么原因 ？

我必须告诉还有其他 css 文件，当鼠标放在它们上面时，它们往往会改变链接的颜色并且它们工作正常。

原文由 saplingPro 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

id 选择器（ #logout ）比类型选择器（ a ）更具体加上伪类（ :hover -f-et- ba2b6 ），所以你的第一个规则总是 级联。

使用 #logout:hover 代替。

原文由 Quentin 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

简化：

您有两个适用于此锚点的 CSS 规则。

两条规则都会改变颜色。

只能应用一个规则；只能选择一种颜色。

浏览器必须在基于 ID 的规则（ #logout ）和基于元素类型的规则（ <a> ）之间做出选择。

在这种情况下，基于 ID 的规则获胜。指定一个 ID 比指定一个类型（锚点）的所有元素更具体。

原文由 DOK 发布，翻译遵循 CC BY-SA 3.0 许可协议