Question

我使用bootstrap 4，如果这很重要，但我试图改变锚标签内文本的颜色。我正在使用外部CSS文件，似乎无法让它工作。这可能是一个愚蠢的问题，但嘿，我是前端的新手！教我巫师！

#home_nav {
  background-color: #5680E9;
}
.home_text{
  color:#ffffff;
}

<div class="container-fluid"  id="home_nav">
      <div class="row">
        <div class="col-4">
          <div class="display-2 home_text"><a href="/STEMuli_Website/HTML_Pages/Explore.html">Create</a></div>
          <div class="display-2 home_text"><a href="/STEMuli_Website/HTML_Pages/Explore.html">Explore</a></div>
          <div class="display-2 home_text"><a href="#">Your Library</a></div>
        </div>
        <div class="col-8">
          
        </div>
      </div>
    </div>

Answer 1

你必须将风格添加到＆＃39; a＆＃39;特别是

.home_text a{
    color:#ffffff;
}

Answer 2

你可以试试这个：

.home_text a {
    color: blue;
}

如果您不想使用下划线，请尝试以下操作：

.home_text a {
    color: blue;
    text-decoration: none;
}

Answer 3

使用css的完整选择器。 .home_text＆gt; a 如果还没有工作..color必须设置在其他地方。所以检查其他css或写！对颜色很重要。

Answer 4

欢迎使用StackOverflow，欢迎使用编码前端！

我会试着解释一下。

.home_text {
  color: #ffffff;
}

告诉浏览器将白色文本颜色应用于具有CSS类home-text的元素。

color也是一个所谓的inherited property，这意味着子元素也会有color: #ffffff;（简称：color: #fff;），除非更具体的规则另有说明

在您的情况下，浏览器包含default styles许多元素，包括<a>。这称为用户代理样式表，除非被您的 css覆盖，否则其规则适用。

要覆盖规则，您的规则必须至少与用户代理样式表规则一样具体。

用于例如锚点的用户代理样式表。 Chrome看起来像这样：

a:-webkit-any-link { color: -webkit-link; cursor: pointer; text-decoration: underline; }

这是使用webkit（chrome后面的引擎曾被称为“webkit”，因此是命名）特定的语法，你不应该让你失望。重要的是，它保留了color的规则，您要用颜色#fff替换它。

最重要的是，浏览器对于已经访问过的链接也有不同的默认颜色。你或者也需要为你的链接定义这个（例如#eee用于已经访问的页面）或者只是添加第二个选择器（用逗号分隔第一个）告诉浏览器不仅要将颜色应用于{{1元素，以及a状态中的a元素。这是通过将visited添加到:visited来完成的。

总结一下，如果您希望页面上的所有链接都是白色的，那么您可以选择：

a

如果您只想a, a:visited { color: #fff; }个a元素内的class="home_text"为白色：

.home_text a, .home_text a:visited { color: #fff; }

如果您有任何其他问题，或者有些事情不清楚，请在评论中提问！

前往前端的快乐之旅！

Answer 5

小建议

使用ID的完整路径

#home_nav .home_text a

或

home .home_text a

有时候，当元素不想改变时，你会拯救你的神经。

在Bootstrap中更改文本的颜色

5 个答案: