html - 更改 Bootstrap 中文本的颜色

Question

如果这很重要，我会使用 bootstrap 4，但我正在尝试更改 anchor 标记内文本的颜色。我正在使用外部 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; (简称:color: #fff;)除非更具体的规则另有规定。

在你的例子中，浏览器有 default styles对于许多元素，包括 <a> .这称为用户代理样式表，它的规则适用，除非被您的 css 覆盖。

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

anchor 的用户代理样式表，例如Chrome 看起来像这样:

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

这是使用 webkit(chrome 背后的引擎过去被称为“webkit”，因此命名)特定的语法，你不应该让你失望。重要的部分是它拥有 color 的规则。你想用你的颜色替换它#fff .

最重要的是，浏览器对于已经访问过的链接也有不同的默认颜色。您也需要为您的链接定义它(例如 #eee 用于已访问的页面)或简单地添加第二个选择器(与第一个用逗号分隔)告诉浏览器不仅将您的颜色应用于 a元素，还有a visited 中的元素状态。这是通过添加 :visited 来完成的至 a .

总而言之，如果您希望页面上的所有链接都是白色的，您可以这样做:

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

如果你只想要 a在具有 class="home_text" 的元素内部变白:

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

如果您还有其他问题，或者有什么不清楚的地方，请在评论中提问!

前端之旅愉快!