Bootstrap Navbar оленьего кожа цвет текст уважения

Question

У меня есть следующий HTML как моя: навигационная панель

<div id='container_1'> 
    <nav class="navbar navbar-default"> 
     <div class="container"> 
      <div class="navbar-header"> 
       <ul class='nav navbar-nav'> 
        <li><a class="navbar-brand" id='navbar_1' href="#">Home</a></li> 
        <li><a class="navbar-brand" id='navbar_2' href="#">Works</a></li> 
        <li><a class="navbar-brand" id='navbar_3' href="#">Blog</a></li> 
        <li><a class="navbar-brand" id='navbar_4' href="#">Resume</a></li> 
        <li><a class="navbar-brand" id='navbar_5' href="#">Contact</a></li> 
       </ul> 
      </div> 
      <div id="appily_header"><h3>Appily</h3></div> 
     </div> 
    </nav> 
    <div class="row"> 
     <div class="col-sm-2 col-sm-push-2" id='iphone_image'> 
     </div> 
     <div class="col-sm-8"> 
     </div> 
    </div> 
</div> 

И я не могу получить текст в навигационной панели уважать мой CSS стиль.

Но я не понимаю, почему ...

.navbar-brand{ 
    color: white; 
} 

... привычка стиль текста, но

#navbar_1{ 
    color: white; 
} 

работает?

EDIT

я должен был добавить !important .... к сожалению.

Answer 1

Цвета не были изменены из-за specificity weight. Если вы осмотрите Навигационная панель элементов, вы увидите, что загрузчик использует следующий селектор CSS, чтобы стиль цвет:

.navbar-default .navbar-nav>li>a{ 
    color:#777; 
} 

в то время как вы пытаетесь изменить цвет, используя класс:

.navbar-brand{ 
color: red; 
} 

It ясно, что предыдущий (селектор Bootstrap по умолчанию) выше вашего селектора. Вы можете использовать важные ключевые слова, чтобы изменить поведение по умолчанию, или использовать один и тот же же селектор CSS, как Bootstrap (если вы не хотите использовать imporat ключевое слово):

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

Наконец, вы можете использовать этот полезный сайт, чтобы помочь вы вычисляете specificity weight.

Answer 2

У вас неправильный элемент.

использовать это:

.navbar-brand { 
    color: white; 
} 

Answer 3

Как Кевином выше, плюс:

1. Вы используете подчеркивание (_) вместо дефиса (-) при ссылках на класс "NavBar-бренд" ;

2. Ваш # navbar_1 ID должен стилизации цвет текста домой ссылки (только), но если это не работает, возможно, попробуйте добавить важное заявление, чтобы заставить переопределение и посмотреть, если это работает:

   navbar_1 {цвет: белый! Важно;}

3. Не имеет отношения, но я предполагаю, что вы знаете, что ссылка на ваш контейнер нечетна. Обычно вы добавляете/изменяете стиль, добавляя отдельный класс или идентификатор.

4. И, наконец, если вы делаете оптовые изменения в своих ссылках, вы можете создать их все с помощью «navbar-defaul» (я думаю, что это тот).

Удачи! :)

EDIT: Просто отметить, вы изменили underscopre к дефисом для NavBar-бренд, так что игнорировать 1.