HTML - 覆盖菜单中<li>元素的样式</li>

时间:2015-02-03 06:49:11

标签: 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>

当然,所有li元素都会将悬停应用于它们。如何仅为第3项关闭悬停?

2 个答案:

答案 0 :(得分:3)

更新 Css将覆盖定义的顶部到底部的所有样式

&#13;
&#13;
 #megamenu {
    /*styling here*/
  }

  #megamenu li {
    /*styling here*/
  }

  #megamenu li:hover {
    color: green
  }
  #megamenu li:nth-child(3):hover {
    color: yellow
  }
&#13;
<ul id="megamenu">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>
&#13;
&#13;
&#13;

使用nth-child

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

这是一个完整的演示

&#13;
&#13;
 #megamenu {
    /*styling here*/
  }

  #megamenu li {
    /*styling here*/
  }

  #megamenu li:hover {
    color: blue
  }

  #megamenu li:nth-child(3):hover {
    color: red
  }
  
&#13;
<ul id="megamenu">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>
&#13;
&#13;
&#13;

如果您只有3个元素,则可以使用:last-child

&#13;
&#13;
     #megamenu {
        /*styling here*/
      }

      #megamenu li {
        /*styling here*/
      }

      #megamenu li:hover {
        color: blue
      }

      #megamenu li:last-child:hover {
        color: red
      }
&#13;
<ul id="megamenu">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>
&#13;
&#13;
&#13;

答案 1 :(得分:1)

像这样添加:

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

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