如何将已选择的样式（如悬停）应用到此侧面导航菜单

Question

我有侧面导航菜单，但是当我在页面上应用样式干扰其他ul和li元素时，我想在此导航上应用悬停和所选样式，请您分享一些示例如何仅针对此特定菜单执行此操作

   <div class="col-xs-4 col-md-4 col-lg-4 navleftnavigator" >
       <!-- Sidebar -->
       <nav class="navbar navbar-center" id="sidebar-wrapper" role="navigation" style="border: 1px solid #862828">
           <ul class="nav sidebar-nav ">
               <li>
                   <a href="#">Home</a>
               </li>
               <li>
                   <a href="#">About</a>
               </li>
               <li>
                   <a href="#">Events</a>
               </li>
               <li>
                   <a href="#">Team</a>
               </li>
               <li>
                   <a href="#">Services</a>
               </li>
               <li>
                   <a href="#">Contact</a>
               </li>
               <li>
                   <a href="https://twitter.com/maridlcrmn">Follow me</a>
               </li>
           </ul>
       </nav>
       <!-- /#sidebar-wrapper -->
    </div>

Answer 1

为您的nav元素添加唯一的className甚至是ID

然后使用唯一的CSS选择器。

类似：

nav.crazy-class-name-without-duplicates {
  border: 1px solid red;
}

nav.crazy-class-name-without-duplicates > ul > li {
  border: 1px solid tomato;
}

nav.crazy-class-name-without-duplicates > ul > li > a {
  color: navy;
}


nav.crazy-class-name-without-duplicates > ul > li:hover {
  /* li mouseover */
  background-color: red;
}

a::selection {
  /* a selection */
  background-color: yellow;
}

<div class="col-xs-4 col-md-4 col-lg-4 navleftnavigator" >
       <!-- Sidebar -->
       <nav class="navbar navbar-center crazy-class-name-without-duplicates" id="sidebar-wrapper" role="navigation" style="border: 1px solid #862828">
           <ul class="nav sidebar-nav ">
               <li>
                   <a href="#">Home</a>
               </li>
               <li>
                   <a href="#">About</a>
               </li>
               <li>
                   <a href="#">Events</a>
               </li>
               <li>
                   <a href="#">Team</a>
               </li>
               <li>
                   <a href="#">Services</a>
               </li>
               <li>
                   <a href="#">Contact</a>
               </li>
               <li>
                   <a href="https://twitter.com/maridlcrmn">Follow me</a>
               </li>
           </ul>
       </nav>
       <!-- /#sidebar-wrapper -->
    </div>