重写引导导航栏类 - 不会工作(Overriding Bootstrap navbar classe

好了，所以我有一些覆盖导航栏白手起家类的问题。我不知道，但如果我用它的作品!important ，但我宁愿避免不惜任何代价。

因此，这里是我的html：

<nav class="navbar navbar-default" role="navigation">
  <ul class="navbar navbar-nav">
    <li><a>Actions</a></li>
    <li><a>Profile</a></li>
    <li><a>Kingdom</a></li>
    <li><a>Inventory</a></li>
    <li><a>Alliance</a></li>
    <li><a>Mail Box</a></li>
    <li><a href="user/logout">Logout</a></li>
  </ul>
</nav>

这里有一些我已经试过了CSS的：

.navbar.navbar-nav li a {
  color: lightgray;
}

这一个不工作^

.navbar.navbar-nav > li > a {
  color: lightgray;
}

无论这是否一个^

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

这是一个只工作了^（我曾尝试这样做没有一个!important为好。

编辑：CSS调用

  <title># - KoG</title>
  <link rel="stylesheet" type="text/css" href="../components/bootstrap/dist/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="../styles/game/default.css">
</head>

编辑：

这种方法处理覆盖特异性问题，因为你是在覆盖提供的样式_reboot.scss （这是自举的一部分）

因此，这是一个解决方案，实现一个，你想达到什么样的，你的解决方案必须处理这个问题的另一种方式。

实施例，其改变那些li而不href

 .navbar .navbar-nav a:not([href]) { color: red; }

 <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" /> <nav class="navbar navbar-default" role="navigation"> <ul class="navbar navbar-nav"> <li><a>Actions</a></li> <li><a>Profile</a></li> <li><a>Kingdom</a></li> <li><a href="#">Inventory</a></li> <li><a>Alliance</a></li> <li><a>Mail Box</a></li> <li><a href="user/logout">Logout</a></li> </ul> </nav>

在下面的例子，如果你使用.navbar .navbar-nav a ，它只是改变那些a有被有href 。

.navbar .navbar-nav a {
  color: red;
}

 .navbar .navbar-nav a { color: red; }

 <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" /> <nav class="navbar navbar-default" role="navigation"> <ul class="navbar navbar-nav"> <li><a>Actions</a></li> <li><a>Profile</a></li> <li><a>Kingdom</a></li> <li><a href="#">Inventory</a></li> <li><a>Alliance</a></li> <li><a>Mail Box</a></li> <li><b><a href="user/logout">Logout</a></b></li> </ul> </nav>