Активная страница не работает

Question

Здравствуйте, я ужасно сожалею о «легком» вопросе, просто я сделал это дословно из веб-сайта, и поэтому я должен упустить что-то больно очевидное. Итак, у меня есть список li, и я хочу, чтобы первый был желтым, а остальные элементы были белыми. У меня есть одно из моих правил в реальном проекте li a { color: white, но я уверен, что этот конкретный класс должен переопределить это правило, нет? Любая помощь будет оценена, спасибо.

          
  
 
   
 
    
.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

Добавить более конкретный селектор CSS, чтобы переопределить белый цвет приходя от #subnav li a, как показано ниже:

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

, и вы будете иметь первый li желтый, если вы поставили active класс к нему.

.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

Попробуйте это, он должен работать. Thanks

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