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

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>

When I preview the file in chrome, IE and Firefox it looks the way I want it too, Plain black text that changes to orange when hovered over. However when I deploy it to the hosting environment for my school project it ends up just looking blue with the underline and it's ugly. How do I fix this?

Answer 1

Please provide CSS specificity (more specific CSS that will have more priority over normal class-based or tag-based CSS), and it will avoid the case of being overridden, please find below example:

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

And if it still doesn't solve your problem, make sure your CSS is being loaded in the browser, and confirm from browser's developer tool.

Answer 2

If you write css in html file, there is no reason that the style didn't work. So I guess, you separate css and html file ?

Check if you can access the online css file,and is the css being linked to html file correctly.Press F12 in chrome and chenck your css file.

If you couldn't open online css file, your server may have some problem with static file.