无法通过类更改字体颜色，只能使用 ID 属性答案

【问题标题】：Unable to change font color via class, only works using the ID attribute无法通过类更改字体颜色，只能使用 ID 属性
【发布时间】：2016-04-19 01:08:27
【问题描述】：

我正在自学 Ruby on Rails，到目前为止我非常喜欢它。我不确定这是否是 Rails 特有的问题。我无法通过类更改“颜色”属性，只能更改 ID。我可以使用类更改其他属性，例如背景颜色，但不能更改颜色。

#topLink {
  color: #fff;
}

上面的代码可以工作，但是下面的代码不行..

.topLink {
  color: #fff;
}

这是我的html代码

<header class="navbar navbar-fixed-top navbar-inverse">
  <div class="container">
    <%= link_to "Game Week", root_path, id: "logo" %>
    <nav>
      <ul class="nav navbar-nav navbar-right">
        <li><%= link_to "Home",   root_path, id: "topLink" %></li>
        <li><%= link_to "Help",   help_path, class: "topLink" %></li>
        <li><%= link_to "Log in", '#', id: "topLink" %></li>
      </ul>
    </nav>
  </div>
</header>

呈现的 HTML：

<header class="navbar navbar-fixed-top navbar-inverse">
  <div class="container"> <a id="logo" href="/">Game Week</a>
    <nav>
      <ul class="nav navbar-nav navbar-right">
        <li><a class="topLink" href="/">Home</a></li>
        <li><a href="/help">Help</a></li>
        <li><a href="#">Log in</a></li>
      </ul>
    </nav>
  </div>
</header>

第一个 <li> 标记将改变颜色，因为它被分配了一个 ID。第二个<li> 标签没有做任何事情，因为它被分配了一个类。

有什么想法吗？

【问题讨论】：

呈现的 HTML 是什么？
首页
帮助

【解决方案1】：

我认为，如果您了解 CSS 特定性，您会更容易调试此类问题。阅读this MDN doc。

css 特性有很多注意事项，但通常您需要了解 id 会覆盖 class 以及带有类和元素的选择器，例如.nav a 覆盖单个类选择器 .topLink。（Here 是一个有趣的 CSS 计算器，你可以玩）。

我的猜测是导航内的链接有一些引导规则，它会覆盖您的单类选择器规则。另一个提示，如果它们的权重相同，则最后加载的选择器会覆盖之前的选择器。正如@trh 在评论中指出的那样，您可能需要在需要自定义 css 文件之前需要引导库。

否则，可以保证在您的情况下使用更具体的选择器。只是不要将 id 用于 css 样式，因为这被认为是不好的做法（有关详细信息，请参阅 MDN 文章）。

【讨论】：