html - 更改下载的模板导航颜色困惑

Question

所以我想改变导航栏的颜色。我使用过 HTML 和 CSS，但之前没有真正进行过设计更改。出于某种原因，我一辈子都想不出如何更改我下载的这个 html/css 模板。

 <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-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 class="navbar-brand" href="index.php">CandyCode</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse navbar-ex1-collapse">
            <ul class="nav navbar-nav">
                <li><a href="#about">About</a>
                </li>
                <li><a href="#services">Services</a>
                </li>
                <li><a href="#contact">Contact</a>
                </li>
            </ul>
        </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container -->
</nav>

我不太确定要在 CSS 中更改什么。基本上我想将导航栏颜色更改为#77bbb0。我可以显示更多代码，但我认为为了清楚起见，您可以在此处查看代码:http://startbootstrap.com/blog-home .

感谢您帮助设计菜鸟!

Answer 1

最简单的方法是给有问题的 HTML 元素一个 id，然后添加 CSS 规则:

#the_id_i_gave_it { background:#77bbb0; }

但是，如果您不能或不想编辑标记，您可以将元素上的各种类链接在一起，使您的规则具有高度特异性:

.navbar.navbar-inverse.navbar-fixed-top { background:#77bbb0; }

只要这些类不发生变化，就应该足够具体以获取您想要的 div，而不是其他。