Question

如何将原始颜色（蓝色）更改为灰色？

<div class="col-md-4 ftco-animate py-5 nav-link-wrap aside-stretch">
     <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist">
         <a class="nav-link px-4 active" id="v-pills-room-tab" data-toggle="pill" href="#v-pills-room" role="tab" aria-controls="v-pills-room" aria-selected="true"><i class="fas fa-bed"></i> Rooms</a>
         <a class="nav-link px-4" id="v-pills-event-tab" data-toggle="pill" href="#v-pills-event" role="tab" aria-controls="v-pills-event" aria-selected="false"><i class="fab fa-dribbble"></i> Events</a>
         <a class="nav-link px-4" id="v-pills-dining-tab" data-toggle="pill" href="#v-pills-dining" role="tab" aria-controls="v-pills-dining" aria-selected="false"><i class="fas fa-cocktail"></i> Dining</a>
         <a class="nav-link px-4" id="v-pills-policy-tab" data-toggle="pill" href="#v-pills-policy" role="tab" aria-controls="v-pills-policy" aria-selected="false"><i class="fas fa-feather-alt"></i> Policy</a>
     </div>
</div>

Answer 1

这些是根据您的需要链接到样式的状态，

a:link - a normal, unvisited link
a:visited - link the user has visited
a:hover - link when the user mouses over it
a:active - link the moment it is clicked

这将应用于所有a标记，如果您想对特定的类进行操作，则可以使用className并使用此属性。

.nav-link px-4:active {
  color:grey;
};

此链接可以给您更多的想法，您可以在那里进行测试，

CSS links

Answer 2

我知道，您正在使用引导程序，因此可以使用bootstrap colors，例如 bg-success ：

<a class="nav-link px-4 active bg-success" id="v-pills-room-tab" data-toggle="pill" href="#v-pills-room" role="tab" aria-controls="v-pills-room" aria-selected="true"><i class="fas fa-bed"></i> Rooms</a>

Answer 3

您可以通过CSS进行更改。

.active {
  color: #DCDCDC;   
}

如何将活动的导航链接的颜色更改为另一种颜色？

3 个答案: