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のルールに！importantを追加し、問題が解決するかどうかを確認します。次に、それを上書きしているスタイルを追跡する必要があります。

.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); 
}