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

Question

我不明白为什么当我点击打开下拉菜单的导航栏项目 "My account" 时出现蓝色边框：

所以我试着用 !important 把所有的东西都变成红色，但没有成功：

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

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

好像不是.active我得编辑了。怎么做？

Answer 1

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

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/

Answer 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