Css 导航丸（引导4）激活不工作

我试图将背景色应用于导航丸的活动状态。下面是我的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）？ 谢谢

试试这个

不使用

！重要信息

和

（直接子选择器） 只需使用并更改悬停和活动样式的

顺序

即，先将悬停样式添加到，然后添加活动样式

.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链接：悬停{
背景颜色：绿色；
颜色：白色；
盒影：1px 1px；
}
.导航药丸.导航项目.导航链接：激活{
背景：红色；
颜色：白色；
}
.导航药丸.导航链接{
颜色：#46b3e6；
边框：2倍实心#eee；
左边距：10px；
盒影：2px2px；
}








试试这个

不使用
！重要信息
和
（直接子选择器）
只需使用并更改悬停和活动样式的
顺序

即，先将悬停样式添加到，然后添加活动样式

.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链接：悬停{
背景颜色：绿色；
颜色：白色；
盒影：1px 1px；
}
.导航药丸.导航项目.导航链接：激活{
背景：红色；
颜色：白色；
}
.导航药丸.导航链接{
颜色：#46b3e6；
边框：2倍实心#eee；
左边距：10px；
盒影：2px2px；
}








为所有项目使用相同的php文件应该不会有问题，请尝试将活动状态放置在项目元素中：.nav pills>.nav item:active>.nav link{谢谢。仍然不起作用，对所有这些文件使用相同的php文件应该不会有问题，请尝试将活动状态放置在item元素中：.nav pills>.nav item:active>.nav link{谢谢。仍然不起作用，您想要像这个@Osah Prince吗？您想要像这个@Osah Prince吗？