导航药丸(引导程序4)处于活动状态，无法工作

Question

我试图将背景颜色应用于导航药丸的活动状态。下面是我的HTML和CSS

.nav-pills > .nav-item > .nav-link:active{
background: red!important;
color: white!important;
}
.nav-pills > .nav-item > .nav-link:hover {
background-color: green!important;
color:white !important;
box-shadow: 1px 1px!important;
}
.nav-pills .nav-link {
color: #46b3e6;
border: 2px solid #eee;
margin-left: 10px;
box-shadow: 2px 2px;
}

这是我的html

<ul class="nav nav-pills justify-content-center">
<li class=" nav-item">
<a class="nav-link" href="all_patients.php">All Patients</a>
</li>
<li class="nav-item">
<a class="nav-link" href="all_patients.php?action=vacant_bedspaces">Vacant Bedspaces</a>
</li>
<li class="nav-item">
<a class="nav-link" href="all_patients.php?action=free_patients">Discharged Patients</a>
</li>
</ul>

还是因为我的链接有相同的基础(all_patients.php(？感谢

Answer 1

试试这个，

不使用!important和>(直接子选择器(

只需使用并更改悬停和活动的order样式。

也就是说，先添加悬停样式，然后添加活动样式

.nav-pills .nav-item .nav-link:hover {
background-color: green;
color:white;
box-shadow: 1px 1px;
}
.nav-pills .nav-item .nav-link:active{
background: red;
color: white;
}

现场演示

.nav-pills .nav-item .nav-link:hover {
background-color: green;
color:white;
box-shadow: 1px 1px;
}
.nav-pills .nav-item .nav-link:active{
background: red;
color: white;
}
.nav-pills .nav-link {
color: #46b3e6;
border: 2px solid #eee;
margin-left: 10px;
box-shadow: 2px 2px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<ul class="nav nav-pills justify-content-center">
<li class="nav-item">
<a class="nav-link" href="all_patients.php">All Patients</a>
</li>
<li class="nav-item">
<a class="nav-link" href="all_patients.php?action=vacant_bedspaces">Vacant Bedspaces</a>
</li>
<li class="nav-item">
<a class="nav-link" href="all_patients.php?action=free_patients">Discharged Patients</a>
</li>
</ul>