html - 元素上的 css 样式不起作用

Question

我现在正在使用 bootstrap，我在更改 css 文件中 a 元素的属性时遇到问题。

当我改变时使用内联方法链接的颜色比它工作正常，但是当我尝试在我的外部 css 文件中更改颜色时它不起作用。例如 A { 红色;

我什至给每个 a 元素一个类，但它仍然不起作用。

这是我的 html 和 css:

 <nav class="navbar navbar-default navbar-fixed-top">
  <div class="container" id="cont1">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Project name</a>
    </div>
    <div id="navbar" class="collapse navbar-collapse pull-right">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#" class="nav-a">Home</a></li>
        <li><a href="#about" class="nav-a">Over ons</a></li>
        <li class="dropdown"> 
            <a id="vacatures" href="#" class="dropdown-toggle nav-a" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> Vacatures <span class="caret"></span> </a> 
            <ul class="dropdown-menu" aria-labelledby="vacatures"> 
                <li><a href="#">Action</a></li> 
                <li><a href="#">Another action</a></li> 
                <li><a href="#">Something else here</a></li> 
                <li role="separator" class="divider"></li> 
                <li><a href="#">Separated link</a></li> 
            </ul> 
        </li>
        <li class="dropdown"> 
            <a id="nieuws" href="#" class="dropdown-toggle nav-a" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> Nieuws <span class="caret"></span> </a> 
            <ul class="dropdown-menu" aria-labelledby="nieuws"> 
                <li><a href="#">Action</a></li> 
                <li><a href="#">Another action</a></li> 
                <li><a href="#">Something else here</a></li> 
                <li role="separator" class="divider"></li> 
                <li><a href="#">Separated link</a></li> 
            </ul> 
        </li>
        <li class="dropdown"> 
            <a id="werkgevers" href="#" class="dropdown-toggle nav-a" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">         Werkgevers <span class="caret"></span> </a> 
            <ul class="dropdown-menu" aria-labelledby="werkgevers"> 
                <li><a href="#">Action</a></li> 
                <li><a href="#">Another action</a></li> 
                <li><a href="#">Something else here</a></li> 
                <li role="separator" class="divider"></li> 
                <li><a href="#">Separated link</a></li> 
            </ul> 
        </li>
        <li><a href="#contact" class="nav-a">Contact</a></li>
      </ul>
    </div><!--/.nav-collapse -->
  </div>
</nav>

然后我尝试访问导航中的这个元素:

a { 
  color: red;
{
or
.nav-a {color: red;} or li.nav-a , li a etc.

有人可以解释一下为什么我对这个 a 元素有问题吗？

CSS 文件:

body, html {
padding: 0;
margin: 0;
}

nav {
width: 100vw;
padding: 0;
margin: 0;
}

.navbar-default {
background-color: white;
height: 120px;  
}


nav li {
font-size: 18px;
padding-top: 41px;
}

li.nav-a {
color: red;
}    

Answer 1

您的问题可能出在这里:

li.nav-a {
  color: red;
}

应该是:

li.nav a {
  color: red;
}

去掉“-”号访问<a>标签。

编辑:或者你的意思可能是这些:

li .nav-a {
  color: red;
}

自 nav-a是一个类名(之前没注意到)，那么它的父类就是<li> ，那么这些可能会解决您的问题。只需分开 li和 .nav-a .