twitter-bootstrap - 更改事件选项卡的背景颜色

Question

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

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

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

Answer 1

在 Bootstrap v2.3.2 CSS 文件中，您的代码片段的 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 片段进行比较，您缺少 li .active 之前的选择器选择器。
您的 CSS 是正确的，但它不起作用，因为 Bootstrap CSS 中的特异性更多。
因此，只需通过增加特异性将您的代码片段更改为:

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

现在，您的浏览器在呈现页面时将选择您的 CSS 片段。
您可以在此处查看示例: 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/