Блог

Я читал о специфике CSS и попробовал несколько вариантов, в том числе

     .navbar-default .navbar-brand {
    color: #ff0000;
}
  

в файле bootstrap.css, но безуспешно. Чего мне не хватает?

.navbar-default .navbar-brand означает, что стиль будет применен .navbar-brand только при размещении под .navbar-default . В вашем случае такого родителя нет.

Вы можете изменить его на .navbar .navbar-brand или добавить .navbar-default в nav тег выше

Если вы используете фреймворк, подобный bootstrap, переопределить стили по умолчанию может быть сложно. В этом случае у вас есть два варианта-

Используйте идентификатор-

Укажите элементу, который вы хотите создать, любой идентификатор. Он обладает высочайшей специфичностью.

 #mynav{
    color: #ff0000;
}
  

Использовать !important —

Хотя это и не очень рекомендуется, но использование !important даже переопределяет идентификатор. В вашем случае —

 .navbar-default .navbar-brand {
    color: #ff0000 !important;
}
  

Я не вижу никаких элементов с navbar-default классом, поэтому я думаю, что это причина, по которой правило не работает.

Это должно быть лучше:

 .navbar .navbar-brand {
    color: #ff0000;
}
  

Он применяется ко всем элементам, соответствующим .navbar-brand селектору (что означает элементы с class атрибутом, содержащим navbar-brand ) внутри всех элементов, соответствующих .navbar селектору (элементы с class содержанием navbar ).

Вы можете очень быстро протестировать его в консоли вашего браузера с document.querySelectorAll() помощью метода:

 document.querySelectorAll('.navbar-default');
document.querySelectorAll('.navbar');
document.querySelectorAll('.navbar .navbar-brand');

  

Каждая команда вернет массив элементов, соответствующих вашему CSS-селектору, который вы можете развернуть и выделить элементы на странице, когда наведете на них курсор мыши.

Как уже упоминал @Yegor Androsov, нет .navbar-default . Таким образом, цвет текста, который вы пытаетесь применить, не будет работать в том виде, в каком он у вас есть:

 .navbar-default .navbar-brand {
    color: #ff0000;
}
  

Рассмотреть:

 
.navbar .navbar-brand{
    color: #ff0000;
}
  

Это будет работать для кода, как показано на скриншоте. Однако, если вы измените и включите .navbar-default , не забудьте соответствующим образом настроить свою специфику.