Невозможно создать «активную» ссылку с помощью css

Question

Я хочу создать «активную» ссылку .login, но она не работает. В чем проблема?

.active { 
 
    color: rgb(0, 148, 199); 
 
}

<div id="nav"> 
 
    <span id="logo"></span> 
 
    <span id="navTop"> 
 
     <ul> 
 
      <li><a href="#">.welcome</a></li> 
 
      <li><a href="#">.register</a></li> 
 
      <li><a class="active" href="#">.login</a></li> 
 
      <li><a href="#">.contact</a></li> 
 
     </ul> 
 
    </span> 
 
    <span id="navBottom"> 
 
     <ul> 
 
      <li><a href="#">.overview</a></li> 
 
      <li><a href="#">.feature</a></li> 
 
      <li><a href="#">.videos</a></li> 
 
     </ul> 
 
\t </span> 
 
</div>

Answer 1

Этот код, кажется, работает хорошо. Я бы предположил, что у вас есть другое правило css, которое отменяет это.

Вы можете проверить это, добавив! Важно правило css и посмотреть, решит ли он проблему. Затем вам нужно отследить, какой стиль его переопределяет.

например.

.active { 
    color: rgb(0, 148, 199)!important; 
} 

.active { 
 
    color: rgb(0, 148, 199); 
 
}

<div id="nav"> 
 
<span id="logo"></span> 
 
<span id="navTop"> 
 
    <ul> 
 
     <li><a href="#">.welcome</a></li> 
 
     <li><a href="#">.register</a></li> 
 
     <li><a class="active" href="#">.login</a></li> 
 
     <li><a href="#">.contact</a></li> 
 
    </ul> 
 
</span> 
 
<span id="navBottom"> 
 
    <ul> 
 
     <li><a href="#">.overview</a></li> 
 
     <li><a href="#">.feature</a></li> 
 
     <li><a href="#">.videos</a></li> 
 
    </ul> 
 
</span> 
 
</div>

Answer 2

Ваш оригинальный код, кажется, работает, но попробуйте это для CSS.

#navTop > .active { 
    color: rgb(0, 148, 199); 
}