在Bootstrap中更改文本颜色

Question

如果这很重要的话，我使用引导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

欢迎来到StackOverflow，也欢迎来到编码前端！

我试着解释一下。

.home_text {
  color: #ffffff;
}

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

color也是一个所谓的inherited property，这意味着子元素也将具有color: #ffffff; (short：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 )或简单地添加第二个选择器(从第一个选择器中用逗号分隔)，告诉浏览器不仅要将颜色应用于a元素，还需要向处于visited状态的a元素应用颜色。这是通过将:visited添加到a来完成的。

总之，如果您希望页面上的所有链接都是白色的，请使用以下内容：

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

如果只希望在具有白色a的元素中使用class="home_text"：

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

如果你有任何进一步的问题，或有什么不清楚，只需问在评论！

祝您前程愉快！

Answer 2

您必须将样式添加到“a”中。

.home_text a{
    color:#ffffff;
}

Answer 3

你可以试试这个：

.home_text a {
    color: blue;
}

如果你不想要下划线，那就试试这个：

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