html - 侧边栏导航元素不改变颜色

Question

目前，我有以下 HTML

<div class="row">
    <div class="col-sm-3 col-md-2 sidebar">
        <ul class="nav nav-sidebar" data-ng-controller="NavbarController">
            <li class="nav-item" data-ng-class="{'active':getClass('/a')}" data-ng-show="user.admin"><a href="#/a">a</a></li>
            <li class="nav-item" data-ng-class="{'active':getClass('/b')}" data-ng-show="user.admin"><a href="#/b" >b</a></li>
            <li class="nav-item" data-ng-class="{'active':getClass('/c')}" data-ng-show="user.admin"><a href="#/c" >c</a></li>
            <li class="nav-item" data-ng-class="{'active':getClass('/d')}" data-ng-show="user.admin"><a href="#/d" >d</a></li>
            <li class="nav-item" data-ng-class="{'active':getClass('/e')}" data-ng-show="user.admin"><a href="#/e" >e</a></li>
            <li class="nav-item" data-ng-class="{'active':getClass('/f')}" data-ng-show="user.admin"><a href="#/f">f</a></li>
            <li class="nav-item" data-ng-class="{'active':getClass('/g')}" data-ng-show="user.admin"><a href="#/g">g</a></li>
            <li class="nav-item" data-ng-click="action()" data-ng-show="user.admin"><a href="#/h">h</a></li>
        </ul>
    </div>
....

我试图在鼠标悬停或单击时控制各个导航栏元素的颜色，但我似乎运气不佳。

根据我从阅读中收集到的信息，我需要关注 :hover 和 :active 但无论我尝试 CSS 选择器的哪种方式我都无法得到它改变颜色。

如何让导航栏的各个元素具有自定义悬停和事件颜色？

Answer 1

你在找这个吗...

DEMO

这里我在css中使用了nth-child

li:nth-child(1):hover {
    background: red;
}