HTML
<li class="nav-item">
<a class="nav-link active" href="#">1. link</a>
</li>
}
CSS
.active
{
color: white;
background-color: #9e1981;
border-radius: 5px;
}
Problem polega na tym że kolor czcionki się nie zmienia, natomiast kolor tła i obrys działa bez problemu.
Obiekt a jest wyjątkowym elementem i wymaga specjalnego traktowania. Kolor czcionki najlepiej zmieniać przez bardziej specyficzny selektor css, np. a.active. W twoim przypadku powinno się sprawdzić:
.active, a.active
{
color: white;
background-color: #9e1981;
border-radius: 5px;
}
Wynika to z tego, że selektor .active jest bardzo ogólny, a przeglądarka ma domyślne style dla a które mają bardziej specyficzny selektor w postaci:
a {
....
}
są też style dla linków w różnych stanach active, hover, itd. Więcej info tutaj https://developer.mozilla.org/en-US/docs/Web/CSS/:link + sekcja See also.
Już to próbowałem w ten sposób, dalej tak samo jest. Jeżeli w html wstawię na sztywno to kolor czcionki się zmienia. W dreamwaver pokazuje w podglądzie że to działa. Natomiast problem jest po załadowaniu strony z przeglądarki, jest atrybut color w inspektorze tylko zmieniony na czarny.
Ponieważ masz inne selektory z pseudo-klasami do których dałem Ci link. Jak popatrzysz jakie style są używane w dev toolsach to zobaczysz, że będzie to już prawdopodobnie kolejny selektor a:visited lub a:active czy też a:link wszystkim musisz nadać takie wartości jakie chcesz mieć w odpowiednich “stanach” linka.
Nie używaj dreamweavera bo to bardzo toporne i kiepskie narzędzie.