覆盖Bootstrap导航栏类 - 不会工作

Question

好吧，所以我在覆盖一些bootstraps导航栏类时遇到了问题。我不确定，但如果我使用!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>

Answer 1

编辑：

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

因此，这是实现的解决方案之一，您要实现的目标，您的解决方案必须是处理此问题的另一种方式。

在没有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>