CSS/Bootstrap не може да промени цветовете на таблетките

За живота си не мога да накарам цветовете на фона или цветовете на текста да се променят на елементите на навигационната ми лента, когато използвам navbar-pills чрез 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="/bgindex.html">Home</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="/bgmenu.html">Menu</a>
        </li>
        <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="/bg">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="/bgindex.html">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="/bgmenu.html">Menu</a>
    </li>
    <li class="nav-item">
      <a class="nav-link active" aria-current="page" href="/bg">Contact Us</a>
    </li>
  </ul>
</nav>

person Arleigh Hix    schedule 04.04.2021
comment
Разбирам, благодаря. Правилно ли разбирам, че моят css не е имал предимство, тъй като css за първоначално зареждане беше по-конкретно насочен към елемента, така че се използва по-специфичното правило? - person Craig Johnson; 04.04.2021