HTML - Смяна на стил за елемент <li> в менюто ми - html, css

Имам следните класове в моя css файл

  #megamenu {
/*styling here*/
}

#megamenu li {
/*styling here*/
}

#megamenu li:hover {
/*styling here*/
}

В моя HTML имам

   <ul id="megamenu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

Естествено, всички елементи на елементите на ливър придават ховър върху тях. Как мога да изключа курсора само за елемент 3?

Отговори:

Актуализация Css ще презапише всички стилове от върха до дъното на вашата дефиниция

 #megamenu {
/*styling here*/
}

#megamenu li {
/*styling here*/
}

#megamenu li:hover {
color: green
}
#megamenu li:nth-child(3):hover {
color: yellow
}

<ul id="megamenu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

употреба тото-дете

  #megamenu li:nth-child(3):hover {
/*styling here*/
}

Ето пълна демонстрация

 #megamenu {
/*styling here*/
}

#megamenu li {
/*styling here*/
}

#megamenu li:hover {
color: blue
}

#megamenu li:nth-child(3):hover {
color: red
}

<ul id="megamenu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

Ако имате само 3 елемента, можете да използвате :последно дете

     #megamenu {
/*styling here*/
}

#megamenu li {
/*styling here*/
}

#megamenu li:hover {
color: blue
}

#megamenu li:last-child:hover {
color: red
}

<ul id="megamenu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

Добавете така:

 #megamenu {
list-style: none;
display: inline-flex;
}

#megamenu li {
padding-left: 10px;
}

#megamenu li:not(:last-child):hover {
color:red;
}

Работно цигулка:http://jsfiddle.net/Lgkf75jb/

Алтернативно, За конкретен li можете да добавите класа и да дадете така,

HTML код:

<ul id="megamenu">
<li>Item 1</li>
<li>Item 2</li>
<li class="no_effects">Item 3</li>
</ul>

Стил на CSS:

 #megamenu {
list-style: none;
display: inline-flex;
}

#megamenu li {
padding-left: 10px;
}

#megamenu li:not(.no_effects):hover {
color:red;
}

Поиграйте си:http://jsfiddle.net/Lgkf75jb/1/