Question

我在将CSS样式应用于li时遇到了问题。当然问题不是特异性但我不知道如何选择李 - 我只是想能够设计这些白色的样式并应用与品牌相同的悬停效果标题。

关于我哪里出错的任何想法？

＆＃13;

/* MAKES HEADER NAVBAR NO WIDER THAN 960PX */
.width-960px { max-width: 960px; }

.no-padding-unless-mobile {
    padding: 0;
}

.navbar {
    margin-bottom: 50px;
    background: #3C7AAD;
}

.navbar-header .navbar-brand {
    color: #fff;
}

.navbar-header .navbar-brand:hover {
    color: #D5D5D5;
}

/* I can't be any more specific than this... */
.navbar .navbar-default .navbar-static-top .container .width-960px .no-padding-unless-mobile .collapse .navbar-collapse .navHeaderCollapse .nav .navbar-nav .navbar-right ul li a {
    color: #fff;
}

＆＃13;

<header class="navbar navbar-default navbar-static-top">
        <div class="container width-960px no-padding-unless-mobile">
            <div class="navbar-header">
                <a href="index.html" class="navbar-brand">Brand Name</a>

                <!-- MOBILE BUTTON - VIEWABLE ON MOBILE SIZED BROWSERS ONLY -->
                <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
                    <!-- HAMBURGER MENU -->
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>

            <nav class="collapse navbar-collapse navHeaderCollapse">
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="matches.html">Link 1</a></li>
                    <!--<li><a href="#">NEWS</a></li>-->
                    <li><a href="products.html">Link 2</a></li>
                    <li><a href="contact.html">Link 3</a></li>
                </ul>
            </nav>

        </div>
    </header>

＆＃13;

Answer 1

.navbar-right已经是ul ...只能使用如下所示你也可以使用ul.navbar-right来选择它。但我认为你遇到了问题。

Cloud Datastore

/* MAKES HEADER NAVBAR NO WIDER THAN 960PX */
.width-960px { max-width: 960px; }

.no-padding-unless-mobile {
    padding: 0;
}

.navbar {
    margin-bottom: 50px;
    background: #3C7AAD;
}

.navbar-header .navbar-brand {
    color: #fff;
}

.navbar-header .navbar-brand:hover {
    color: #D5D5D5;
}

/* I can't be any more specific than this... */
.navbar-right li a {
    color: #fff !important;
}

Answer 2

替换它：

.navbar .navbar-default .navbar-static-top .container .width-960px .no-padding-unless-mobile .collapse .navbar-collapse .navHeaderCollapse .nav .navbar-nav .navbar-right ul li a {
    color: #fff;
}

有了这个：

.nav li a {
    color: #fff;
}
.nav li a:hover {
    color: #D5D5D5;
}

Answer 3

您需要添加此

.navbar-default .navbar-nav>li>a{ color:#fff !important;} .navbar-default .navbar-nav>li>a:hover { background:#fff !important; color:#333 !important;}

.width-960px { max-width: 960px; }

.no-padding-unless-mobile {
    padding: 0;
}

.navbar {
    margin-bottom: 50px;
    background: #3C7AAD;
}

.navbar-header .navbar-brand {
    color: #fff;
}

.navbar-header .navbar-brand:hover {
    color: #D5D5D5;
}

/* I can't be any more specific than this... */
.navbar .navbar-default .navbar-static-top .container .width-960px .no-padding-unless-mobile .collapse .navbar-collapse .navHeaderCollapse .nav .navbar-nav .navbar-right ul li a {
    color: #fff;
}

.navbar-default .navbar-nav>li>a{ color:#fff !important;}
.navbar-default .navbar-nav>li>a:hover { background:#fff  !important; color:#333  !important;}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

 <header class="navbar navbar-default navbar-static-top">
        <div class="container width-960px no-padding-unless-mobile">
            <div class="navbar-header">
                <a href="index.html" class="navbar-brand">Brand Name</a>

                <!-- MOBILE BUTTON - VIEWABLE ON MOBILE SIZED BROWSERS ONLY -->
                <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
                    <!-- HAMBURGER MENU -->
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>

            <nav class="collapse navbar-collapse navHeaderCollapse">
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="matches.html">Link 1</a></li>
                    <!--<li><a href="#">NEWS</a></li>-->
                    <li><a href="products.html">Link 2</a></li>
                    <li><a href="contact.html">Link 3</a></li>
                </ul>
            </nav>

        </div>
    </header>

麻烦将CSS应用于li - 最终特异性失败

3 个答案: