css - Wordpress 上的 Bootstrap 菜单

Question

我正在尝试在链接处于事件状态时使用自定义 CSS 更改导航栏的颜色，但当我单击到另一个页面时它不适用。

    #custom-navbar.navbar-default .navbar-brand {
    color: rgba(119, 119, 119, 1);
}
#custom-navbar.navbar-default {
    font-family: 'Open Sans Condensed', sans-serif;
    font-size: 22px;
    background-color: rgba(47, 46, 46, 1);
    border-width: 0px;
    border-radius: 0px;
}
#custom-navbar.navbar-default .navbar-nav>li>a {
    color: rgba(255, 255, 255, 1);
    background-color: rgba(47, 46, 46, 1);

}

#custom-navbar.navbar-default .navbar-nav>li>a:hover,
#custom-navbar.navbar-default .navbar-nav>li>a:focus {
    color: rgba(0, 0, 0, 1);
    background-color: rgba(255, 255, 255, 1);
}
#custom-navbar .navbar-default .navbar-nav>.active> a,
#custom-navbar.navbar-default .navbar-nav .parent>li>a:focus{
    color: rgba(0, 0, 0, 1);
    background-color: rgba(255, 255, 255, 1);

}

#custom-navbar.navbar-default .navbar-toggle {
    border-color: #ffffff;
}
#custom-navbar.navbar-default .navbar-toggle:hover,
#custom-navbar.navbar-default .navbar-toggle:focus {
    background-color: #ffffff;
}
#custom-navbar.navbar-default .navbar-toggle .icon-bar {
    background-color: #ffffff;
}
#custom-navbar.navbar-default .navbar-toggle:hover .icon-bar,
#custom-navbar.navbar-default .navbar-toggle:focus .icon-bar {
    background-color: #2f2e2e;
}

如果您想查看并有更好的想法，我还会发布我创建的网站。 Website link

提前致谢

Answer 1

您的选择器不够具体。这:

.navbar-default .navbar-nav>.active>a, 
.navbar-default .navbar-nav>.active>a:focus, 
.navbar-default .navbar-nav>.active>a:hover {
    color: #555;
    background-color: #e7e7e7;
}

被这个覆盖:

#custom-navbar.navbar-default .navbar-nav>li>a {
    color: rgba(255, 255, 255, 1);
    background-color: rgba(47, 46, 46, 1);
}

如果您在基本语句中使用 ID 选择器，则还需要在覆盖中使用 ID 选择器。

#custom-navbar.navbar-default .navbar-nav>.active>a, 
#custom-navbar.navbar-default .navbar-nav>.active>a:focus, 
#custom-navbar.navbar-default .navbar-nav>.active>a:hover {
    color: #555;
    background-color: #e7e7e7;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity