Изменение цвета текста в CSS с помощью Bootstrap (Nav-pills)

Question

Я использовал загрузчик, чтобы создать сайт с загрузочным блоком, когда у меня возникла небольшая проблема. Я пытался изменить цвет текста в моей навигационной панели (таблетки):

HTML:

<nav> 
     <ul class="nav nav-pills nav-justified"> 
      <li class="active"><a href="#">Home</a></li> 
      <li><a href="#">About</a></li> 
      <li><a href="#">Privacy Policy</a></li> 
     </ul> 
    </nav> 

CSS:

.nav-pills a{ 
color:white; 
} 

(Этот код решить мою проблему, но у меня есть некоторые вопросы ниже.)

Мне было интересно, почему в CSS мне нужно ссылаться на класс .nav-pills (почему бы и нет .nav), и почему я должен ссылаться на a (тег ссылки), чтобы получить цвет tex t изменить. (Когда я попытался изменить a (тег ссылки) на li (тег списка), цвет текста не изменился.)

Answer 1

Когда вы посмотрите на bootstrap.css (файл, который устанавливает эти значения до вы делаете), вы увидите, что цвет установлен для .nav-таблетки> li> в

.nav-pills > li.active > a, .nav-pills > li.active > a:focus, .nav-pills > li.active > a:hover { 
    color: #fff; 
    background-color: #3276b1 
} 

Итак, если вы установите цвет .nav, это будет перекрываться класса .nav-таблетки стиль декларации.

Если бы вы изменили свой код

.nav { 
    color: white !important; 
} 

Вы бы переопределить более точный селектор, но вы должны избегать использования !important всякий раз, когда это возможно, как это делает ваш код труднее поддерживать.

Answer 2

Причина в порядке предсказуемости - для полного завершения работы https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity.

Что касается конкретного стиля вы спросили о, если вы смотрите в бутстраповском репо, вы увидите следующие два правила:

https://github.com/twbs/bootstrap/blob/b8bc20432f93385989291f2a67112e29b97de682/dist/css/bootstrap.css#L4035

https://github.com/twbs/bootstrap/blob/b8bc20432f93385989291f2a67112e29b97de682/dist/css/bootstrap.css#L4148

Первым предназначены для анкеров .nav и второй для якорей в .nav-таблетках. Поэтому второй переопределяет первое, и для того, чтобы ваши стили могли переопределить его, он должен быть по крайней мере таким же конкретным, как и второй.

Answer 3

Вы должны ссылаться на класс «.nav-pills a», потому что это раздел, который вы пытаетесь создать. Если вы просто положите .nav без добавления -pills a, тогда код не будет иметь смысла, поэтому ничего не произойдет.

Answer 4

Мне было интересно, почему в CSS мне нужно ссылаться на класс .nav-pills (почему бы и нет .nav), и почему я должен ссылаться на ссылку (тег ссылки), чтобы получить цвет текст для изменения. (Когда я попытался изменить A (ссылка тегов) для литий (список тегов), цвет текста не меняется.)

Вы переопределить класс СЧА в загрузчике, это лучше сделать у вас есть класса, поэтому у вас есть собственный контроль в атрибуте определенного класса. Тег link (a) имеет свойства цвета css, которые нельзя переопределить только с помощью тега list, потому что текст находится внутри тега ссылки (a).