Bootstrap 4中修改锚点文本颜色问题求助

嘿，作为前端新手遇到这种样式覆盖问题太正常啦！我来帮你捋清楚原因和解决办法：

问题根源 #

Bootstrap 4自带的<a>标签样式有自己的优先级，你现在给父元素.home_text设置color，但<a>标签本身继承不到这个颜色（或者说被Bootstrap的默认样式覆盖了）——因为Bootstrap直接给<a>标签设置了color属性，权重比父元素的继承样式高得多。

几个可行的解决方案 #

• 方案1：直接给<a>标签加专属类（推荐）
  这是最清晰、最不容易冲突的方式：

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

  对应的HTML修改：

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

• 方案2：提高CSS选择器权重
  如果你不想改动HTML结构，可以用更具体的选择器来覆盖Bootstrap的默认样式：

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

  这个.home_text a选择器比Bootstrap默认的a选择器更具体，所以能成功覆盖颜色设置。

• 方案3：使用!important（尽量少用）
  万不得已的时候可以用，但不推荐——它会打乱样式优先级逻辑，后续维护容易出问题：

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

关键提醒 #

别忘了把你的外部CSS文件放在Bootstrap的CSS文件之后引入！比如：

<!-- 先引入Bootstrap样式 -->
<link rel="stylesheet" href="path/to/bootstrap.min.css">
<!-- 再引入你的自定义样式 -->
<link rel="stylesheet" href="path/to/your-custom-style.css">

这样你的样式才能优先覆盖Bootstrap的默认样式，这也是新手常踩的小坑哦！

内容的提问来源于stack exchange，提问作者mrwadepro