将CSS应用到li的问题 - 最终特异性失败

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

关于我要去哪里的任何想法都是错误的？

/* 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; 
 
}

<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>

来源

2017-08-02 user3760941

.navbar-权已经是UL ...只有使用如下你也可以使用ul.navbar右选择它。但我认为你有这个问题。

/* 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; 
 
}

<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>

来源

2017-08-02 11:17:29 RacoonOnMoon

替换此：

.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; 
}

来源

2017-08-02 11:23:08

您需要添加此

.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>

来源

2017-08-02 11:24:21

将CSS应用到li的问题 - 最终特异性失败

回答

相关问题