Не применяется стиль css

[asyntrail]

Здравствуйте! Не могу разобраться, почему не применяется стиль к (.navbar-brand) когда он помещен в навбар?

 

[Svetlana_P]

Да, из-за Bootstrap. Правило не срабатывает, потому что оно имеет меньшую специфичность (т.е. "приоритетность"), чем родное бутстраповское. Если Вы не знаете, о чем речь, то советую почитать про специфичность селекторов CSS. Это важно.

Что можно сделать? Вижу три варианта.

1. Добавить специфичности к правилу: так, чтобы применялось даже внутри navbar-default:

2. В файл бутстрапа залезть и там изменить правило, но я бы не стала.

3. Добавить еще к ссылке еще один класс, определяющий цвет

 

[Svetlana_P]

Какой стиль — цвет текста? Так он же переопределяется правилом в navbar.less.

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

Потому что спецефичность селектора .navbar-default .navbar-brand выше, чем спецефичность .navbar-brand.

Или Вы про что?

[asyntrail]

1 час назад, Svetlana_P сказал:

Какой стиль — цвет текста? Так он же переопределяется правилом в navbar.less.

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

Потому что спецефичность селектора .navbar-default .navbar-brand выше, чем спецефичность .navbar-brand.

Или Вы про что?

Стиль color:green; применяется к классу .navbar-brand только за пределами тега <nav>, внутри тега <nav>  стиль для .navbar-brand не срабатывает, это имел ввиду. Думаю,что это как-то связано с bootstrap который здесь задействован?!

Edited June 14, 2017 by asyntrail

[Schamil74]

Здесь был странный текст

Edited June 14, 2017 by Schamil74

[asyntrail]

12 минуты назад, Svetlana_P сказал:

Да, из-за Bootstrap. Правило не срабатывает, потому что оно имеет меньшую специфичность (т.е. "приоритетность"), чем родное бутстраповское. Если Вы не знаете, о чем речь, то советую почитать про специфичность селекторов CSS. Это важно.

Что можно сделать? Вижу три варианта.

1. Добавить специфичности к правилу: так, чтобы применялось даже внутри navbar-default:

2. В файл бутстрапа залезть и там изменить правило, но я бы не стала.

3. Добавить еще к ссылке еще один класс, определяющий цвет

 

 Вроде суть понял, у меня заработало  так

.navbar-default .navbar-header .navbar-brand{
  color:green;
}

Спасибо за разъяснение! 

[asyntrail]

2 часа назад, marimarituk сказал:

Привет, у меня тоже была похожая проблема, не могла разобраться почему не применялись стили CSS. Отдала сайт на тестирование http://www.a1qa.ru/performance-testing/. Всё исправили, дали подробный отчет об ошибке. Если найду отчет об ошибке, скину позже.

Спасибо конечно, но вопрос уже как 2 недели решен и теперь не актуален. Еще раз спасибо за беспокойство!