Question

我的HTML导航：

<nav class="navbar navbar-default navbar-fixed-top navbar-custom">
    <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="nav navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <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="#home">Treasures Reading</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Early Childhood <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#early_childhood_little_treasures">Little Treasures</a></li>
                    </ul>
                </li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Kindergarten <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#kindergarten_big_books">Big Books</a></li>
                        <li><a href="#kindergarten_decodable_books">Decodable Books</a></li>
                        <li><a href="#kindergarten_a">A</a></li>
                        <li><a href="#kindergarten_o">O</a></li>
                        <li><a href="#kindergarten_b">B</a></li>
                        <li><a href="#kindergarten_trade_books">Trade Books</a></li>
                    </ul>
                </li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">1st Grade <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#first_grade_anthology">Anthology</a></li>
                        <li><a href="#first_grade_big_books">Big Books</a></li>
                        <li><a href="#first_grade_decodable_books">Decodable Books</a></li>
                        <li><a href="#first_grade_a">A</a></li>
                        <li><a href="#first_grade_o">O</a></li>
                        <li><a href="#first_grade_b">B</a></li>
                        <li><a href="#first_grade_trade_books">Trade Books</a></li>
                    </ul>
                </li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">2nd Grade <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#second_grade_anthology">Anthology</a></li>
                        <li><a href="#second_grade_decodable_books">Decodable Books</a></li>
                        <li><a href="#second_grade_a">A</a></li>
                        <li><a href="#second_grade_o">O</a></li>
                        <li><a href="#second_grade_b">B</a></li>
                        <li><a href="#second_grade_trade_books">Trade Books</a></li>
                    </ul>
                </li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">3rd Grade <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#third_grade_anthology">Anthology</a></li>
                        <li><a href="#third_grade_a">A</a></li>
                        <li><a href="#third_grade_o">O</a></li>
                        <li><a href="#third_grade_b">B</a></li>
                    </ul>
                </li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">4th Grade <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#fourth_grade_anthology">Anthology</a></li>
                        <li><a href="#fourth_grade_a">A</a></li>
                        <li><a href="#fourth_grade_o">O</a></li>
                        <li><a href="#fourth_grade_b">B</a></li>
                    </ul>
                </li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">5th Grade <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#fifth_grade_anthology">Anthology</a></li>
                        <li><a href="#fifth_grade_a">A</a></li>
                        <li><a href="#fifth_grade_o">O</a></li>
                        <li><a href="#fifth_grade_b">B</a></li>
                    </ul>
                </li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">6th Grade <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#sixth_grade_anthology">Anthology</a></li>
                        <li><a href="#sixth_grade_a">A</a></li>
                        <li><a href="#sixth_grade_o">O</a></li>
                        <li><a href="#sixth_grade_b">B</a></li>
                    </ul>
                </li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>

我添加了自己的css样式表来覆盖<head>中的引导程序：

<link href="css/bootstrap.min.css" rel="stylesheet" />
<link href="css/styles.css" rel="stylesheet" />

我的样式表如下所示：

html {
    min-height:100%;
}
body {
    padding-top: 70px;
    height: 100%;
    background: #E0EAFC; /* fallback for old browsers */
    background: -webkit-linear-gradient(to bottom, #91bef8, #E0EAFC); /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to bottom, #91bef8, #E0EAFC); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#91bef8', endColorstr='#E0EAFC');
}

.navbar-custom{
    border-width: 2px;
    border-bottom-width:4px;
    border-bottom-color:White;
    border-bottom-style: solid;
    background: #E0EAFC; /* fallback for old browsers */
    background: -webkit-linear-gradient(to bottom, #91bef8, #002f6c); /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to bottom, #91bef8, #002f6c); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#91bef8', endColorstr='#002f6c');
}

.nav {
    background: #E0EAFC; /* fallback for old browsers */
    background: -webkit-linear-gradient(to bottom, #91bef8, #002f6c); /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to bottom, #91bef8, #002f6c); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#91bef8', endColorstr='#002f6c';
}

.nav .navbar-nav>li>a {

    color:  #FFFFFF;
}

正如您所看到的 - 只是尝试让字体以纯白显示。

其他选项会适当保留 - 但其中的最后一个选择器不会应用适当的字体颜色。

我尝试了各种各样的改变，但我无法改变它！

Answer 1

首先，您的CSS无效，因为在样式.nav的选择器filter中，您在值的末尾缺少)。

其次，您想要更改标题Treasures Reading的颜色吗？那么这段代码就可以了：

.nav.navbar-header a {
    color:  #FFFFFF;
}

Answer 2

尝试使用.nav.navbar-nav（没有空格）

.nav.navbar-nav>li>a {

    color:  #FFFFFF;
}

Bootstrap Nav字体颜色不会改变

2 个答案: