一行文字拒绝更改颜色

Question

我正在做一个使用HTML / CSS重新创建google主页的项目，并且在大多数情况下效果都很好，除了出于某种原因我无法在“ Sign Up”中获取文字来更改color 。

<div id="contents">
    <div id="navbar">
        <ul>
            <li id="signin"><a href="https://accounts...">Sign In</a></li>

我用这些行在CSS中称呼它。

#navbar a {
    text-decoration: none;
    width: 200px;
    color: #4c4c4c;
    font-size: 14px;
}

#signin {
    background-color: blue;
    font-weight: 800;
    color: #ffffff !important;
    padding: 7px 12px;
    }

我添加了!important想法，它会改变，但没有做任何事情。 还要注意，这只是一些代码，导航栏上的其他项目都具有相同的正确颜色。 我更改了background-color ，但没有更改实际的文本color 。

Answer 1

正如其他评论者所暗示的那样，您只需要为嵌套的锚标记使用单独的CSS规则（ #signin a ）。

 #navbar a { text-decoration: none; width: 200px; color: #4c4c4c; font-size: 14px; } #signin { background-color: blue; font-weight: 800; color: #ffffff; padding: 7px 12px; } #signin a { color: #ffffff; } 

 <div id="contents"> <div id="navbar"> <ul> <li id="signin"><a href="https://accounts...">Sign In</a></li> </ul> </div> </div>