如何只更改一些navbar鏈接的顏色？

Question

我正在構建一個網站，其中一半的導航欄鏈接是黑色的，一半是白色的。我有：

@navbar-default-link-color: #fcfcfc; 

但是，我很努力弄清楚如何覆蓋導航欄的另一半的鏈接顏色。我試過的東西，我發現谷歌搜索一樣：

.navbar-default > .navbar-nav > .dark > a:link { 
    color: #171b1e !important; 
} 

，只是

.dark { 
    @navbar-default-link-color: @brand-primary; 
} 

HTML例如：

<li class="dark"> 
    <a href="https://dribbble.com" target="_blank"> 
    <i class="fa fa-dribbble fa-2x"></i> 
    </a> 
</li> 

我也試過的id而不是類。我試過的任何東西都會覆蓋鏈接的顏色。我確實已經閱讀了關於使用每個＃menu-item更改每個單獨的navbar鏈接的內容，但是我對如何實際獲得＃menu-item值感到迷茫。

Answer 1

很難知道是否應用正確的CSS不看瀏覽器檢查，但這應該起作用：

如果將暗色應用於<li>元素，則最可能需要將其直接應用於<a>元素，因爲它具有應用於其的默認顏色。

.dark > a { 
    color: @brand-primary; 
} 

如果不工作，嘗試實施!important。這將迫使它使用正確的顏色：

.dark > a { 
    color: @brand-primary !important; 
} 

你也可以簡單地渲染到<a>元素。在這種情況下：

a.dark { 
    color: @brand-primary !important; 
} 

並將其應用在<a>

<li> 
    <a class="dark"> 
    Link Text 
    </a> 
</li> 

Answer 2

你可以使用導航欄的漸變..但它會是漸變的顏色過渡。

編輯：只需使用導航欄和導航欄不違約或反定型..你可以再手動編寫CSS像

.navbar { 
      background: #e0e0e0; 

     .navitem { 
       background: #ffffff; 
    } 
     .navitem2 { 
       background: #ffffff; 
    } 
    }