css 将文本颜色更改为白色

wz3gfoph  于 2023-02-26  发布在  其他
关注(0)|答案(3)|浏览(238)

基于下面的代码,我怎样才能将文本颜色更改为white?代码改编自question。在标记问题的答案中,我不知道第一个地方的颜色是如何设置为蓝色的。

.footer-background {
  padding-top: 20px;
  padding-bottom: 20px;
  background-color: #1c2a48;
}

.logo,
.nav {
  margin-bottom: 10px;
}

.nav-pills {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha512-6MXa8B6uaO18Hid6blRMetEIoPqHf7Ux1tnyIQdpt9qI5OACx7C+O3IVTr98vwGnlcg0LOLa02i9Y1HpVhlfiw==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<div class="footer-background container-fluid">
  <div class="row">
    <div class="col-xs-6 col-sm-4 center-block">
      <ul class="nav nav-pills">
        <li><a href="https://www.b.org/opengovernment/prr/Pages/default.aspx">Public Records Request</a></li>

        <li><a href="https://www.b.org/AgenciesAndServices/Pages/Default.aspx">Contact Us</a></li>

        <li><a href="https://www.b.org/ReportAComplaint/Pages/Default.aspx">Report a Complaint</a></li>

        <li><a href="https://www.b.org/Terms/Pages/Default.aspx">Terms of Use</a></li>

        <li><a href="https://www.b.org/Terms/Pages/Default.aspxx">Accessiblity Statement</a></li>

        <li><a href="https://lp.constantcontactpages.com/su/ErJFVZz/B">Subscribe</a></li>
      </ul>
    </div>

    <div class="col-xs-6 col-sm-4 center-block">
      <ul class="nav nav-pills">
        <li><a href="https://b.granicus.com/ViewPublisher.php?view_id=15">Watch Meetings</a></li>
        <li><a href="https://www.b.org/Pages/Welcome.aspx">Copyrights 2022, Government</a></li>
      </ul>
    </div>

    <div class="col-xs-12 col-sm-4">
      <div class="text-white" style="padding-top: 3rem; text-align: center;">
        <ul class="nav nav-pills">

        </ul>
      </div>
    </div>
  </div>
</div>
r3i60tvu

r3i60tvu1#

只需要给链接添加颜色。链接的默认颜色是蓝色。

a {
  color: white;
}
.footer-background {
    padding-top: 20px;
    padding-bottom: 20px;
    background-color: #1c2a48;
  }

  .logo, .nav {
    margin-bottom: 10px;
  }

  .nav-pills {
      display: flex;
      flex-direction: column;
      justify-content: center;
  }
<link />
<div class="footer-background container-fluid">
  <div class="row">
    <div class="col-xs-6 col-sm-4 center-block">
      <ul class="nav nav-pills">

        <li><a href="https://www.b.org/opengovernment/prr/Pages/default.aspx">Public Records Request</a></li>

        <li><a href="https://www.b.org/AgenciesAndServices/Pages/Default.aspx">Contact Us</a></li>

        <li><a href="https://www.b.org/ReportAComplaint/Pages/Default.aspx">Report a Complaint</a></li>
        
        <li><a href="https://www.b.org/Terms/Pages/Default.aspx">Terms of Use</a></li>
        
        <li><a href="https://www.b.org/Terms/Pages/Default.aspxx">Accessiblity Statement</a></li>
        
        <li><a href="https://lp.constantcontactpages.com/su/ErJFVZz/B">Subscribe</a></li>

      </ul>
    </div>
    <div class="col-xs-6 col-sm-4 center-block">
      <ul class="nav nav-pills">
        <li><a href="https://b.granicus.com/ViewPublisher.php?view_id=15">Watch Meetings</a></li>
        <li><a href="https://www.b.org/Pages/Welcome.aspx">Copyrights 2022, Government</a></li>
      </ul>
    </div>
    <div class="col-xs-12 col-sm-4">
      <div class="text-white" style="padding-top: 3rem; text-align: center;">
      <ul class="nav nav-pills">
        
      </ul>
      </div>
    </div>
  </div>
s4chpxco

s4chpxco2#

添加类css:

a{
  color: white;
}
mbyulnm0

mbyulnm03#

这将是一个简单的修复.你可以应用color来应用白色的文本.如果你想应用颜色的a标签,使用css选择器:link为未访问的链接和:visited为已访问的链接.

相关问题