ui-router：ui-sref 不改变字体颜色

Question

我查看了几乎所有相关的问题，并尝试使用 ui-router 的 ui-sref 功能更改导航链接的字体颜色。但是，我没有看到字体颜色的变化，但是当我将其添加到 CSS 中的 .active 类时，我确实看到了背景颜色的变化。 如果有人能指出以下内容有什么问题，我将不胜感激。我只想在路由处于活动状态时更改字体颜色。即

<nav>
            <ul>

                <li ui-sref-active="active" ng-class="{active: activeListItem == 'home'}"> <a ui-sref="Home "><img src="images/icon-information.png"> Introduction </a>  </li>
                <li ui-sref-active="active" ng-class="{active: activeListItem == 'testInfo'}"> <a  ui-sref ="TestInfo"> <img src="images/icon-settings.png"> SmartCart Setup</a></li>
                <li ui-sref-active="active" ng-class="{active: activeListItem =='errorScenarios'}" > <a ui-sref="ErrorScenarios"><img src="images/icon-error.png"> Error Scenarios </a> </li>
                <li ui-sref-active="active"  ng-class="{active: activeListItem == 'contactUs'}" > <a  ui-sref="ContactUs"><img src="images/icon-contact.png"> Contact </a> </li>

            </ul>

</nav>

我的 css 有以下

body {  
  font-family: 'Encode Sans', sans-serif;
  font-weight: 400;
  margin-top: 0px;
}


a {
  color: #F04a24;
  text-decoration: none;
  font-weight: 600;
  border-bottom: 2px dotted #F04a24;
}

a:hover {
  color: #512b83;
  border-bottom: 2px dotted #512b83;
}

h1 {
  color: black;
  font-family: 'Encode Sans', sans-serif;
  font-weight: 300;
  font-size: 3em;
}

h2 {
  color: #512b83;
  font-family: 'Encode Sans', sans-serif;
  font-size: 1.75em;
  font-weight: 800;
  text-transform: uppercase;
}

h3 {
  color: #512b83;
  font-family: 'Encode Sans', sans-serif;
  font-size: 1.25em;
  font-weight: 800;
  text-transform: uppercase;
}
.panel-heading h3, .panel-heading h4 {
  color: #512b83;
  font-family: 'Encode Sans', sans-serif;
  font-weight: 800;
  text-transform: uppercase;
}

nav {
    font-size: 1em;
}

nav a { 
    border-bottom: none;
    font-size: 1em;
    font-weight: 400;
    color: #512b83;
}

nav a:hover {   
    border-bottom: none;
    color: #512b83;
    font-size: 1em;
    font-weight: 600;
}

nav li img{
    width: 20px;
}



.active 
{
color:red;
}

Answer 1

您的 CSS 似乎有问题。 我创建了你的 plunker 的一个分支。

http://plnkr.co/edit/OWp8jAJqNAmfnzCCklTX?p=preview

 li:hover,li:focus, li.active {
     background:blue;
  } 

请注意，它应该是 li.active 。 “active”是“li”标签内的一个类，而不是像悬停或焦点这样的属性。所以它应该是一个“。”而不是“：”。

Answer 2

这就是我的做法

<ul class="sidebar-nav">
    <h5 class="sideNav-title">Main Menu</h5>
    <li class="customNav active" ui-sref-active="active" ng-show="shell.adminAccess"><a ui-sref="dashboard"><i class="fa fa-tachometer" aria-hidden="true"></i> Dashboard</a></li>
    <li class="customNav" ui-sref-active="active" ng-show="shell.adminAccess"><a ui-sref="userManagement"><i class="fa fa-users" aria-hidden="true"></i> User-Management</a></li>
    <li class="customNav" ><a data-toggle="collapse" data-parent="#accordion" data-target="#collapseAttendance" aria-expanded="true" aria-controls="collapseAttendance"><i class="fa fa-id-card-o" aria-hidden="true"></i> Attendance <i class="fa fa-caret-down" aria-hidden="true"></i></a></li>
</ul>

我的抄送希望对您有所帮助。

li.customNav > a:hover,li.active.customNav > a,li.current.customNav > a {
background-color: @main_color !important;
color: #ffffff !important;
border-left: 2.5px solid @primary_color;
box-shadow: 0 2px 3px rgba(0,0,0,0.20), 0 5px 5px rgba(0,0,0,0.22);
transition: all 0.3s cubic-bezier(.25,.8,.25,1);

}