问为什么没有应用我的活动选项卡样式？

EN

<ul class="nav nav-tabs">
    <li class="active">
        <a data-toggle="tab" href="#firstTab">View All</a>
    </li>
    <li>
        <a data-toggle="tab" href="#secondTab">Add New</a>
    </li>
</ul>

<div class="tab-content">
    <div id="firstTab" class="tab-pane fade in active">
        Tab 1 Content
    </div>
    <div id="secondTab" class="tab-pane fade in ">
        Tab 2 Content
    </div>
</div>

ul.nav.nav-tabs {
    margin: 10px 0px;
}

ul.nav.nav-tabs li:not(.active) a {
    background-color: #eeeeee;
    color: grey;
    }

ul.nav.nav-tabs li:active a {
   border-top: 30px solid #16a765;
    }