Html 使用css向活动菜单项添加背景色

如何使用css向活动菜单项添加背景色（即当我单击“关于链接”并转到“关于页面”时，我希望活动菜单项具有红色背景）

这是我在Wordpress中的代码：

<nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
                              <ul class="nav navbar-nav">
                                <?php wp_nav_menu( array( 
                                        'theme_location' => 'main-menu',
                                        'menu_class' => 'nav navbar-nav'
                                ) ); ?>
                              </ul>
                            </nav>

---

但是这个css的目标是“悬停元素。我做错了什么？

我刚刚查看了一些WordPress网站，所以有几个选项可以尝试，因为我不知道如果菜单项处于活动状态，WordPress安装会触发哪个类

选项1:

.navbar-inverse .navbar-nav > li.current-page-item > a{
   background: red;
}

.navbar-inverse .navbar-nav > li.current-menu-item > a{
   background: red;
}

.navbar-inverse .navbar-nav > li a.current {
   background: red;
 }

选项2:

.navbar-inverse .navbar-nav > li.current-page-item > a{
   background: red;
}

.navbar-inverse .navbar-nav > li.current-menu-item > a{
   background: red;
}

.navbar-inverse .navbar-nav > li a.current {
   background: red;
 }

选项3:

.navbar-inverse .navbar-nav > li.current-page-item > a{
   background: red;
}

.navbar-inverse .navbar-nav > li.current-menu-item > a{
   background: red;
}

.navbar-inverse .navbar-nav > li a.current {
   background: red;
 }

---

默认情况下，WordPress菜单使用列表项：当前菜单项输出此类，因此您可以使用此方法以活动菜单项为目标：

li.current-menu-item {
    background: $sec-color;
}

如果您的主题支持创建多个导航菜单，那么您需要在CSS中更具体一些

#menu-main-pages li.current-menu-item {
background: #3FAEA5;
color:#fff;
}

资料来源：

---

嗯，我认为WordPress CMS会自动切换一个

活动的
类或类似的类。因此，您只能针对一个类。如果您可以提供一段已经生成的导航栏HTML，那就太好了。您是对的，谢谢提醒！当鼠标悬停在导航栏项目上时，如何更改颜色？