css style on a element doesn't work

Question

I am using bootstrap right now and I have problem with changing properties of an a element in css file.

When I change eg color using inline method Link than it works fine, but when I try to change color in my external css file it doesn't work. eg a { color: red; }

I even gave a class to each a element but it still doesn't work.

Here is my html and 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>

And than I tried to access to this a element inside nav:

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

Can someone please explain why I have a trouble with this a element ?

CSS file:

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

Your problem might be here:

 li.nav-a { color: red; } 

It should be:

 li.nav a { color: red; } 

Remove the "-" sign to access <a> tag.

Edit: Or maybe you mean these:

 li .nav-a { color: red; } 

Since nav-a is a class name (I didn't notice it earlier), then its parent is <li> , then these might solve your problem. Just separate the li and .nav-a .

Answer 2

In my opinion it happens because propably you include your bootstrap after your CSS stylesheet. In this situation bootstrap CSS override your external stylesheet. You can try change include order.

The second try may be to add !important directive for example

li.nav-a{
color: red!important;
}

But your selector is bad You can do this using for example like this

.navbar-nav a{
    color: red;
}

If you want all links to be color red

Answer 3

尽管这不能直接回答您的问题，但是为了供以后参考，请下载并安装Firefox的FireBug并使用它来检查元素... CSS样式列表以及如何将样式应用于这些元素应显示在RHS上。