HTML-一種替代樣式 <li> 我菜單中的元素

Question

我的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>

自然，所有li元素都將懸停應用於它們。 如何僅關閉第3項的懸停？

Answer 1

Update 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> 

使用第n個孩子

  #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個元素，則可以使用：last-child

  #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> 

Answer 2

像這樣添加：

 #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/