HTML - 覆盖菜单中一个 元素的样式

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

更新 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>

使用nth-child

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