CSS / Bootstrap не может изменить цвета таблеток

Я не могу, хоть убей, изменить цвета фона или цвета текста на элементах панели навигации при использовании таблеток навигации через bootstrap.

Если я уберу элемент с таблетками, цвета будут работать правильно. Я получаю синюю таблетку по умолчанию с белым текстом, хотя полужирный элемент работает при наведении курсора.

a:hover {
    font-weight: 900;
  }
a:link {
    color: blue;
    text-decoration: underline;
}
a:visited {
    color: green;
}
a.active {
    color: #df4759;
    background-color: #323232;
    text-decoration: none;
}
<!-- Nav -->
<nav class="nav-pills navbar navbar-expand-sm">
    <ul class="navbar-nav">
        <li class="nav-item">
            <a class="nav-link" href="index.html">Home</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="menu.html">Menu</a>
        </li>
        <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="">Contact Us</a>
        </li>
    </ul>
</nav>


html css bootstrap-4
person Craig Johnson    schedule 03.04.2021    source источник
comment
Отвечает ли это на ваш вопрос? Как я могу переопределить стили CSS Bootstrap?   -  person shadow-lad    schedule 03.04.2021

Ответы (2)


arrow_upward
0
arrow_downward

Попробуй это.

  a:hover {
      font-weight: 900;
  }
  a:link {
      color: blue !important;
      text-decoration: underline;
  }
  a:visited {
      color: green;
  }
  a.active {
      color: #df4759 !important;
      background-color: #323232 !important;
      text-decoration: none;
  }
person Emin Uzun    schedule 03.04.2021
comment
Спасибо большое, это действительно сработало. Не могли бы вы сказать мне, почему? Не вызывает ли свойство! Important перезапись какого-либо другого форматирования начальной загрузки, которого я не вижу? Почему стили css не применяются без важного свойства? - person Craig Johnson; 04.04.2021
comment
Это потому, что bootstrap специально сделал определение css для другого класса в классе. Чтобы обойти это, используйте! Important или внесите изменения в то же определение. - person Emin Uzun; 08.04.2021

arrow_upward
0
arrow_downward

Вам не нужно использовать !important. Хотя в этом случае он выполняет свою работу, его использование спорно (подробнее здесь). Все, что вам действительно нужно сделать, это согласовать специфику объявления стиля начальной загрузки. Если вы просто проверите элемент в своем браузере, вы увидите, что используется селектор .nav-pills .nav-link.active. Поэтому вам просто нужно использовать тот же селектор для переопределения и убедиться, что ваши стили загружаются после начальной загрузки. Если приведенный выше набор правил стиля предназначен только для этой навигации, рассмотрите возможность обновления всех ваших селекторов, как показано ниже:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

<style>
  nav-pills .nav-link:hover {
    font-weight: 900;
  }
  
  .nav-pills .nav-link:link {
    color: blue;
    text-decoration: underline;
  }
  
  .nav-pills .nav-link:visited {
    color: green;
  }
  
  .nav-pills .nav-link.active {
    color: #df4759;
    background-color: #323232;
    text-decoration: none;
  }
</style>

<nav class="nav-pills navbar navbar-expand-sm">
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="index.html">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="menu.html">Menu</a>
    </li>
    <li class="nav-item">
      <a class="nav-link active" aria-current="page" href="">Contact Us</a>
    </li>
  </ul>
</nav>

person Arleigh Hix    schedule 04.04.2021
comment
Понятно, спасибо. Правильно ли я понимаю, что мой css не имел приоритета, потому что css начальной загрузки был более конкретно нацелен на элемент, поэтому используется более конкретное правило? - person Craig Johnson; 04.04.2021