.btn 字体颜色不变答案

【问题标题】：.btn font color not changing.btn 字体颜色不变
【发布时间】：2018-07-22 21:43:28
【问题描述】：

CSS 初学者，我正在尝试构建导航；

到目前为止，我有以下 CSS 代码。我希望 .btn 字体颜色为白色。我试过使用 !important;但也不工作。

任何想法是什么覆盖了字体颜色以及我可以做些什么来改变它？

/* navigation */
nav {
  width: 503px;
  height: 45px;
  font-family: Roboto;
  font-size: 16px;
  font-weight: 500;
  float: right;
  color: #646881;
}

nav li {
  display: inline;
  padding-right: 20px;
}

nav a:link {
  color: #646881;
}

nav a:hover {
  color: #646881
  font-style: italic;
}

nav a:active {
  color: #646881;
}

nav a:visited {
  color: #646881;
}

img.logo{
  max-height: 45px;
  max-width: 105px;
  border-top: 40px;
  margin-left: 60px;
  float: left;
  padding: 5px;
}


.btn {
background-color: #646881;
width: 75px;
border-radius: 4%;
border: none;
color: #ffffff;
}

HTML

是的，抱歉，这里是 HTML：

<header role="header">

</div>
<a href="index.html"><img border="0" class="logo" src="/assets/images/logo.png" alt="David Bowie Personas Logo"></a>
<!-- Nav-->
  <nav id="MainMenu" role="navigation">
     <ol>
        <li>
          <a href="about.html">About</a>
        </li>
....
        <li>
          <a href="shop.html" class="btn" role="button">Shop</a>
        </li>
    </ol>
  </nav>
</header>

【问题讨论】：

没有重要的..也没有html
要显示任何 HTML 吗？
是的，抱歉现在添加 html

标签： css html button

【解决方案1】：

/* navigation */
nav {
  width: 503px;
  height: 45px;
  font-family: Roboto;
  font-size: 16px;
  font-weight: 500;
  float: right;
  color: #646881;
}

nav li {
  display: inline;
  padding-right: 20px;
}

nav a:hover {
  color: #646881
  font-style: italic;
}

img.logo{
  max-height: 45px;
  max-width: 105px;
  border-top: 40px;
  margin-left: 60px;
  float: left;
  padding: 5px;
}


a.btn {
background-color: #646881;
width: 75px;
border-radius: 4%;
border: none;
color: #ffffff;
display: block;
padding: 10px;
text-align: center;
}

<header role="header">
<a href="index.html"><img border="0" class="logo" src="/assets/images/logo.png" alt="David Bowie Personas Logo"></a>
<!-- Nav-->
  <nav id="MainMenu" role="navigation">
     <ol>
        <li>
          <a href="about.html" class="btn">About</a>
        </li>
....
        <li>
          <a href="shop.html" class="btn" role="button">Shop</a>
        </li>
    </ol>
  </nav>
</header>

【讨论】：

【解决方案2】：

您指的是带有 nav 的 HTML 标记，我假设您有一个带有类名的 div 元素，在这种情况下您应该使用点 .nav

【讨论】：

嗨，维克多，非常感谢！ Også dansk så godt at se andre danskere！我的 HTML 是一个导航元素，所以不使用类。想知道使用类是否有助于覆盖？
是的，CSS 总是使用最具体的参数。检查你的 .btn，你给它的是 class 而不是 name。