为什么我的锚标签仍然是蓝色的？

Question

 a { color: inherit; text-decoration: none; } * { transition: all 0.3s ease-in-out; } .container { clear: both; overflow: auto; } nav { float: right; } .logo img { float: left; } #navbar li { display: inline-block; padding: 10px; font-size: 20px; font-family: raleway; } #navbar li:hover { color: #FFB500; } #navbar { overflow: auto; }

 <header> <div class="container"> <div class="logo"> <img src="" alt="" width="130" /> </div> <nav> <ul id="navbar"> <li> <a href="index.html">Home</a></li> <li> <a href="menu.html">Menu</a></li> <li> <a href="about.html">About</a></li> <li> <a href="contact.html">Contact</a></li> </ul> </nav> </div> </header>

当我在 chrome、IE 和 Firefox 中预览文件时，它看起来也是我想要的样子，纯黑色文本在悬停时变为橙色。 但是，当我将它部署到我的学校项目的托管环境时，它最终看起来只是带有下划线的蓝色，而且很难看。 我该如何解决？

Answer 1

请提供CSS特定性（更具体的CSS将比普通的基于类或基于标签的CSS具有更高的优先级），这样可以避免被覆盖的情况，请参见以下示例：

div nav ul li {
   // some css
}
div nav ul li:hover {
 color: #FFB500;
}

如果仍然不能解决您的问题，请确保已将CSS加载到浏览器中，然后从浏览器的开发人员工具中进行确认。

Answer 2

如果您在 html 文件中编写 css，则没有理由认为样式不起作用。 所以我想，你把 css 和 html 文件分开了？

检查您是否可以访问在线 css 文件，并且 css 是否正确链接到 html 文件。在 chrome 中按 F12 并检查您的 css 文件。

如果您无法打开在线 css 文件，您的服务器可能有一些静态文件问题。