Объясните, как работает этот код css

Question

Эта вкладка работает для меня. Но я не понимаю логику CSS и семантику за ней. Тем более, что последний элемент CSS (который, как мне кажется!) Помогает удерживать вкладку с последним нажатой, пока вы не нажмете следующий. Может кто-то объяснит.

Вот CSS:

/* <<<<<<<<<<<<<<<<<<< start menu_ main >>>>>>>>>>>>>>>>>>>>>*/ 
#tabmenu 
{ margin: 0; 
    padding: 0; 
    list-style-type: none; 
} 

#tabmenu li 
{ float: left; 
    display: block; 
    overflow: hidden; 
    line-height: 1.6em; 
    padding: 0px 5px 0px 5px; 
} 

#tabmenu a 
{ display: block; 
    color: #ffffff; 
    background: #E28F58; /*brown*/ 
    /*border-bottom: 1px solid #333333;*/ 
    text-decoration: none; 
    padding:0 12px 0 12px; 
} 

#tabmenu a:hover 
{ background: #333333; 
    border-bottom: 3px solid #333333; 
} 

#tabmenu a.active, #tabmenu a.active:hover 
{ background: #333333; 
    border-bottom: 3px solid #333333; 
} 

/* <<<<<<<<<<<<<<<<<<< end menu_main >>>>>>>>>>>>>>>>>>>>>*/ 

Вот HTML для индексной страницы:

<ul id="tabmenu"> 
<li><a class="active" href="index.html">Home</a></li> 
<li><a href="programs_ar.html">Programs</a></li> 
<li><a href="students.html">Student Work</a></li> 
<li><a href="research.html">Research</a></li> 
<li><a href="staff.html">Staff</a></li> 
<li><a href="about_activity.html">About Us</a></li> 
<li><a href="contact.html">Contact Us</a></li> 
</ul> 

Answer 1

#tabmenu a.active, #tabmenu a.active:hover 
{ background: #333333; 
    border-bottom: 3px solid #333333; 
} 

<a> тег может быть в 1 из 3 состояний.

• Недоступно: это состояние по умолчанию.
• Посещаемый: меняет цвет, если вы на него нажмете.
• Активность: который в настоящее время щелкнул <a>

Это правила CSS указывает браузеру, чтобы изменить цвет фона любого активного <a> внутри #tabmenu.

Значения <a>, которые вы сейчас активируете, будут «подсвечены».

Правило также говорит, что если вы наведете на него активированный <a>, он будет иметь этот цвет фона.

Итак, когда вы нажимаете на другую <a>, новый щелкнул <a> будет активированный <a>, таким образом, он будет считать, что цвет фона, а предыдущий <a> будет посещаемой <a>, таким образом, он не будет принимать этот цвет.

Answer 2

Предположительно, каждая страница настройки «активный» класс на позиции одного меню, которое затем подкреплялись следующим селектором:

#tabmenu a.active 
{ background: #333333; 
    border-bottom: 3px solid #333333; 
} 

При переходе на новую страницу с новой разметкой, старый выбор «потерян», и любой элемент имеет class="active" теперь соответствует селектору.

Пример:

<!-- you've marked the "home" link as active --> 
<a class="active" href="index.html">Home</a> 

<!-- user clicks another link --> 
<!-- browser navigates --> 

<!-- on this page, "student work" has a class name of "active" --> 
<a class="active" href="students.html">Student Work</a> 

<!-- "home" is no longer selected; "student work" is --> 

Другими словами: любой якорь с именем класса «активного» будет соответствовать селектору. Ничего не мешает сопоставить несколько элементов, например this example.