アクティブページが動作しない

Question

こんにちは私は「簡単な」質問を申し訳なく思っています。それはウェブサイトからこの言い回しをそのまま受けたものです。私はliリストを持っているので、最初のものは黄色で、他の要素は白くします。私は実際のプロジェクトli a { color: whiteの私のルールの1つを持っているが、私はかなりこの特定のクラスは、そのルールを無効にする必要がありますか？どんな助けでも感謝します、ありがとう。

          
  
 
   
 
    
.active{ 
 
\t color: yellow; 
 
} 
 

 

 
#subnav { 
 
\t height: 10%; 
 
\t text-align: center; 
 
} 
 

 
#subnav ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: green; 
 
\t text-align: center; 
 
\t width: 100%; 
 
\t font-weight: bold; 
 
\t 
 
} 
 

 
#subnav li { 
 
    display: inline-block; 
 
} 
 

 
#subnav li a { 
 
    display: block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
} 
 

 
#subnav li a:hover { 
 
    color: yellow; 
 
}
 
    
<div id="subnav"> 
 

 

 
<ul> 
 
    
 

 
    \t \t \t \t <li> <a class="active" href="#overview">Overview </a></li> 
 
     \t 
 

 

 

 
    \t \t </ul> 
 

 
    </div> 
 

 
 
   
 
  
 
 

 

Answer 1

以下のように#subnav li aから来た白い色を無効にするために、より具体的なCSSセレクタを追加します。

#subnav li a.active { 
    color: yellow; 
} 

、あなたがそれに activeクラスを入れている場合は、黄色の最初 liを持つことになります。

.active { 
 
    color: yellow; 
 
} 
 
#subnav { 
 
    height: 10%; 
 
    text-align: center; 
 
} 
 
#subnav ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: green; 
 
    text-align: center; 
 
    width: 100%; 
 
    font-weight: bold; 
 
} 
 
#subnav li { 
 
    display: inline-block; 
 
} 
 
#subnav li a { 
 
    display: block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
} 
 
#subnav li a.active { 
 
    color: yellow; 
 
} 
 
#subnav li a:hover { 
 
    color: yellow; 
 
}

<div id="subnav"> 
 

 
    <ul> 
 
    <li> <a class="active" href="#overview">Overview </a> 
 
    </li> 
 
    <li> <a href="#test">Test </a> 
 
    </li> 
 
    </ul> 
 

 
</div>

Answer 2

それが動作するはずです、これを試してみてください。ありがとう

#subnav li a:hover, 
#subnav li a.active { 
    color: yellow; 
}