Невозможно изменить Bootstrap CSS Nav Bar Color

Question

Я использую bootstrap CSS Navbar, и я не могу изменить цвет текста внутри NavBar. Это мой HTML-код:

<nav class="navbar navbar-default navbar-fixed-top" ng-controller="NavCtrl"> 
     <ul class = "nav navbar-nav"> 
     <li><a class = "nav_color"><span class="glyphicon glyphicon-user"></span> UserName </a></li> 

     <li><a class = "nav_color"><span class="glyphicon glyphicon-book"></span> Book </a></li> 

     <li><a class = "nav_color"><span class="glyphicon glyphicon-pencil"></span> Pencil </a></li> 
     </ul> 
    </nav> 

А вот мой CSS код:

.nav_color { 
     color: red; 
    } 

Я не понимаю, почему это не работает

Answer 1

AXC, Привет.

Попробуйте сделать это с этим.

.nav.navbar-nav li a { 
    color: red; 
} 

Answer 2

Вы можете использовать важно!.

.nav-color { 
    color: red !important; 
} 

Что происходит, что CSS имеет специфические старшинство для применения стилей. Одним из факторов является расчет специфики. Более конкретные правила (такие как определение Bootstrap) имеют более высокий приоритет, чем другие более общие (например, ваш класс). Если вы используете ! Important, вы можете переопределить приоритет этого правила.

Для получения дополнительной информации, проверьте this article.