覆盖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（这是引导程序的一部分）中提供的样式

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

在没有li的情况下更改href的示例

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

在下面的示例中，如果您使用.navbar .navbar-nav a，则只会更改那些a的{​​{1}}。

href

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;