Переопределить правила CSS

Question

HTML файл

<ul id="navbar"> 
      <li class="selected"> 
       <a href="#"> HOME</a> 
      </li> 
      <li> 
       <a href="#"> ABOUT US</a> 
      </li> 
    </ul> 

CSS файл

ul#navbar li { 
    font-size: 13px; 
    padding: 10px; 
    display: inline; 
    text-decoration: none; 
    border: 1px solid #aaaaaa; 
    } 

и теперь я хочу, чтобы добавить нижнюю границу зеленого цвета только на активном элементе списка.

.selected { 
border-bottom: 5px solid #37F053; 
} 

но это не работает. она все еще имеет #aaa нижнего цвета границы

Answer 1

.selected Изменить для ul#navbar li.selected

Answer 2

Использования важно! везде плохая практика. Это означает, что у вас нет контроля над стилем. Правильным правилом будет:

ul#navbar li.selected { 
    border-bottom: 5px solid #37F053; 
}