html - 一行文字拒绝变色

Question

我正在做一个用 HTML/CSS 重新创建 google 主页的元素，大部分结果都很好，除了某些原因我无法让“注册”中的文本更改颜色.

<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) 用于嵌套的 anchor 标记。

#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>