样式化导航栏链接答案

【问题标题】：Styling Navbar Links样式化导航栏链接
【发布时间】：2016-03-25 18:03:19
【问题描述】：

我知道有人问过类似的问题，但是经过大量的解决方案搜索后，没有一个对我有用。

我正在尝试设置导航栏中的链接样式（主要关注字体、颜色和悬停）。

html:

        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <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="#">FLO Home</a>
        </div>

        <div class="collapse navbar-collapse nav-links" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li>
                    <a href="#about">About</a>
                </li>
                <li>
                    <a href="#services">Products</a>
                </li>
                <li>
                    <a href="#contact">Contact</a>
                </li>
            </ul>
        </div>

    </div>

</nav>

css：

.navbar {
background-color: white;
}

.nav-links li a {
color: black;
}

它的样子： Screen Shot

【问题讨论】：

您有什么实际问题吗？
是的，如何更改导航栏链接的颜色...如您所见，css 将它们设置为黑色，但它们不是黑色，如屏幕截图所示。跨度>

标签： html css twitter-bootstrap navbar

【解决方案1】：

在引导程序中，为 ANCHOR 链接着色：

.nav a {
  color: black;
}

您还可以在浏览器中使用 Dev-Tools 并右键单击要设置样式的元素，以便识别类。

【讨论】：

将其更改为 .nav > a 并且这些都不是引导程序特定的。
还是没改，我都试过了 .nav a { color:black; } 和 .nav > a { color:black; }
那么你在某处有其他东西与继承有关。
我在部分...
当你点击 Dev-Tools 中的元素时会发生什么？它应该准确地告诉你你的 CSS 标签需要是什么。

【解决方案2】：

在导航栏中获得的 a 元素中创建一个类。例如，将其命名为 blackletter。然后在css中把color:black放在.blackletter下

【讨论】：

已经尝试过了：/ 在 html 中，我创建了一个名为“nav-links”的新类，并将其添加到包含 and 然后在列表中的 div 中。在css中我放了“导航链接一个{颜色：黑色；}