Question

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

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

我甚至给每个元素上了一堂课，但它仍然没有用。

这是我的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>

而且我试图在nav中访问这个元素：

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

有人可以解释为什么我对这个元素有麻烦吗？

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

你的问题可能就在这里：

＆＃13;

li.nav-a {
  color: red;
}

＆＃13;

应该是：

＆＃13;

li.nav a {
  color: red;
}

＆＃13;

删除＆＃34; - ＆＃34;签名以访问<a>代码。

编辑：或许你的意思是：

＆＃13;

li .nav-a {
  color: red;
}

＆＃13;

由于nav-a是一个类名（我之前没有注意到它），因此其父级为<li>，这些可能会解决您的问题。只需将li和.nav-a分开即可。

Answer 2

在我看来，这是因为你可以在CSS样式表之后包含你的引导程序。在这种情况下，bootstrap CSS会覆盖您的外部样式表。您可以尝试更改包含订单。

第二次尝试可能是添加!important指令，例如

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

但你的选择器很糟糕您可以使用例如此

这样做

.navbar-nav a{
    color: red;
}

如果您希望所有链接都是红色

Answer 3

虽然这不能直接回答您的问题，但为了将来参考，请下载并安装FireBug for Firefox并使用它来检查元素... CSS样式列表以及它们应用于该元素的方式应该出现在RHS上。

元素上的CSS样式不起作用

3 个答案: