导航栏在单击时修改下拉菜单项的边框/背景颜色答案

【问题标题】：Navbar modify border / background color on dropdown-menu item on click导航栏在单击时修改下拉菜单项的边框/背景颜色
【发布时间】：2017-05-02 19:44:01
【问题描述】：

当我点击打开下拉菜单的导航栏项目的“我的帐户”项目时，我不明白为什么会有蓝色边框：

所以我试着像这样用!important 把所有东西都写成红色，但没有成功：

nav a.nav-account.active {
   color: red !important;
   background: red !important;
   border: 2px solid red !important;
}

示例：http://jsfiddle.net/5o06orcg/1/

好像不是.active 我必须编辑。怎么做？

【问题讨论】：

标签： css twitter-bootstrap drop-down-menu navbar

【解决方案1】：

你需要为选择器 nav a.nav-account 设置 !important 边框颜色：

nav a.nav-account {
    color: white !important;
    border-radius: 6px;
    margin-left:10px;
    margin-top:13px;
    line-height:10px !important;
    border: 2px solid white !important;
}

http://jsfiddle.net/a1vv9hvf/

【讨论】：

好的，我明白了，但是当我们点击它时我想改变颜色（边框、背景和字体）。
你在问题中问了什么？
是的，抱歉我的问题不够具体
当菜单折叠时你需要风格化.navbar-default .navbar-nav>li>a。菜单扩展时，需要为.navbar-default .navbar-nav>.open>a定义样式
喜欢吗？ jsfiddle.net/0gtyru6o点击“我的账户”时物品边框没有变成红色。

【解决方案2】：

因为nav a.nav-account.active 您需要将样式应用于.nav .open > a 或.nav .open .dropdown-toggle 才能工作：

.nav .open .dropdown-toggle {
   color: red !important;
   background: red !important;
   border: 2px solid red !important;
}

Jsfiddle-example

【讨论】：