无法更改导航菜单字体颜色

Question

我显然犯了一个愚蠢的错误。请你能帮我发现它吗？使用 Bootstrap。我想要一个简单的导航菜单，它可以正常工作，但我无法更改字体的颜色。这是我用过的代码。

.nav li {
  color: red
  font-weight: bold;
  padding: 5px 5px;
  background: white;
  }
.nav li {
    display: inline;
    font-size: 10px;
    }

这是HTML

 <div class="nav">
      <div class="container-fluid">
<div class="col-md-12">
<ul class="nav nav-pills" >
<li><a href="About.htm">ABOUT US</a></li>
<li><a href="HoP.htm">HOME of PEACE</a></li>
<li><a href="update.htm">NEWS UPDATE</a></li> 
<li><a href="Pastnews.htm">PREVIOUS NEWSLETER</a></li> 
<li><a href="Sponsor.htm">SUPPORT the WORK</a></li> 
<li><a href="giftaid.htm">GIFT AID</a></li> 
<li><a href="Contact.htm">CONTACT</a></li> 
 </ul>
</div>
<div>

Answer 1

请添加这个css

.nav li a {
  color: red;
  font-weight: bold;
  padding: 5px 5px;
  background: white;
  }
.nav li {
    display: inline;
    font-size: 10px;
    }

Answer 2

只需在 "color: red" 后添加分号即可，即 "color: red; "。

Answer 3

像这样在 .nav a 上涂色

.nav li {
  display: inline;
  font-size: 10px;
  font-weight: bold;
  padding: 5px 5px;
  background: white
  }
.nav a {
    color: red
    }

 <div class="nav">
      <div class="container-fluid">
<div class="col-md-12">
<ul class="nav nav-pills" >
<li><a href="About.htm">ABOUT US</a></li>
<li><a href="HoP.htm">HOME of PEACE</a></li>
<li><a href="update.htm">NEWS UPDATE</a></li> 
<li><a href="Pastnews.htm">PREVIOUS NEWSLETER</a></li> 
<li><a href="Sponsor.htm">SUPPORT the WORK</a></li> 
<li><a href="giftaid.htm">GIFT AID</a></li> 
<li><a href="Contact.htm">CONTACT</a></li> 
 </ul>
</div>
<div>

无法更改导航菜单字体颜色

Unable to change nav menu font color

css

fonts

menu

colors

nav