更改活动选项卡的背景颜色答案

【问题标题】：Change background color of active tabs更改活动选项卡的背景颜色
【发布时间】：2013-08-03 19:14:44
【问题描述】：

使用 Bootstrap v2.3.2，我正在尝试更改活动选项卡的默认背景颜色。我试过设置如下，但它不起作用：

.nav-tabs > .active > a,
.nav-tabs > .active > a:hover,
.nav-tabs > .active > a:focus
{
    color: #555555;
    background-color: red;  
}

关于为什么这不起作用或如何解决它的任何建议？

【问题讨论】：

你试过我发布的解决方案了吗？

标签： twitter-bootstrap tabs background-color

【解决方案1】：

在 Bootstrap 3 及更高版本的情况下，以下 css 对我有用（无锚标记）：

ul.nav-tabs > li.active {
    background-color: #e9ecef;
    border: 1px #e9ecef;
    border-radius: .25rem;
    border-bottom-left-radius:0;
    border-bottom-right-radius:0;
}

注意：这也解决了 ui-bootstrap 插件标签的活动标签突出问题。

【讨论】：

【解决方案2】：

在 Bootstrap v2.3.2 CSS 文件中，您的 sn-p 的 CSS 如下：

        .nav-tabs > li.active > a,
        .nav-tabs > li.active > a:hover,
        .nav-tabs > li.active > a:focus {
          color: #555555;
          cursor: default;
          background-color: #ffffff;
          border: 1px solid #dddddd;
          border-bottom-color: transparent;
          }

如您所见，将此与您的 CSS sn-p 进行比较，您在 .active 选择器之前缺少 li 选择器。您的 CSS 是正确的，但它不起作用，因为 Bootstrap CSS 中的特异性更多。因此，只需通过增加特异性将您的代码 sn-p 更改为：

        .nav-tabs > li.active > a,
        .nav-tabs > li.active > a:hover,
        .nav-tabs > li.active > a:focus{
            color: #555555;
            background-color: red;  
        }

现在您的浏览器在呈现页面时将选择您的 CSS sn-p。你可以在这里看到一个例子：http://jsfiddle.net/yyPrg/

您可以在此处阅读 CSS 特性： http://css-tricks.com/specifics-on-css-specificity/ 和这里： http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

【讨论】：