为什么导航类名称是 navbar-default 而不是 navbar答案

【问题标题】：Why is the nav class name navbar-default and not navbar为什么导航类名称是 navbar-default 而不是 navbar
【发布时间】：2019-10-01 08:47:10
【问题描述】：

我正在学习 Ruby on Rails 中的编码，并且正在制作一个随机网页。我添加了引导导航栏。

<nav class="navbar navbar-default navbar-static-top" role="navigation">

我正在尝试将导航栏的边框改为无边框，而不是：

.navbar {
   border: 0;
}

我必须使用：

.navbar-default {
   border: 0;
}

这是我的代码：

<body>
    <nav class="navbar navbar-default navbar-static-top" role="navigation">
      <div class='container'>
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#main-nav-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a href="/" class="navbar-brand">DevMatch</a>
        </div>
        <div class="collapse navbar-collapse" id="main-nav-collapse">
          <ul class="nav navbar-nav navbar-right">
            <li><a href="/about">About</a></li>
          </ul>
        </div><!-- /.navbar-collapse -->
      </div>
    </nav>

【问题讨论】：

我设法设置 .navbar {border: 0;} 的唯一方法是从我的 nav element 中删除 navbar-default 类。为什么？

标签： css twitter-bootstrap class border navbar

【解决方案1】：

您可以使用以下内容，并确保应用您的样式，请添加 !important。

.navbar { border: none !important; }

【讨论】：

O 还了解到 CSS 的特殊性与我的问题有关。显然 nav 的边框取自 .navbar navbar-default 。

【解决方案2】：

马吕斯，

是的，它确实与 CSS 的特殊性有关。我不同意之前使用!important 覆盖样式的答案。对于一次性的更改，它可能看起来很方便，但随着您网站的发展，一段时间后您会继续在多个地方使用!important，它可能会变得非常难以维护。

为了增加给定 CSS 声明的权重，我建议使用多个选择器。你可以试试 -

nav.navbar {
   border: 0;
}

如您所见，将元素与类名一起添加比单独使用类名更重要。

更多关于 CSS 特性的细节可以在here找到。

【讨论】：