html - 如何更改 Bootstrap 滚动 spy 事件链接颜色

Question

我正在使用带有 bootstraps nav-pills navbar 的滚动 spy ，并且似乎无法更改事件链接的颜色或悬停颜色。我一直在尝试各种组合，但似乎仍然无法弄清楚为什么我不能改变颜色。有什么想法吗？

CSS

#stickysteps {
    background: #1bb246;
    width:100%;
    position: absolute;
    z-index: 2;
}

#stickysteps h3 {
    color: #454545;
    font-size: 1.6em;
    text-shadow: 0px 2px 3px rgba(255,255,255,0.5);
    -webkit-background-clip: text;
     -moz-background-clip: text;
          background-clip: text;
}

.nav-pills{
    background-color: #1bb246 !important;
    width: auto !important;
    height: auto !important;
    box-shadow: none;
}

.nav-pills li {
    background-color: #1bb246;
    width: auto;
    height: auto;
}

.nav-pills li>a>h3:active {
    color: red !important;
}

.nav-pills > .active > a, 
    .nav-pills > .active > a:hover {
    color: #ffffff !important;
    background-color: #1bb246;
}

导航

<div id="stickysteps">
    <ul class="nav nav-pills">
        <% n = 0 %>
        <% @manual.steps.order(:priority).each do |step| %>
        <li><a href="#step<%= n+1 %>"><h3>Step <%= n + 1 %></h3></a></li>
        <% n += 1 %>
        <% end %>
    </ul>
</div>

Answer 1

这对我有用:
.nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover { 颜色:红色!重要； 背景颜色:白色； }