將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的問題 - 最終特異性失敗

回答

相關問題