twitter-bootstrap – 更改活动选项卡的背景颜色

发布时间：2020-12-18 00:17:17 所属栏目：安全来源：网络整理

导读：使用Bootstrap v2.3.2,我尝试更改活动选项卡的默认背景颜色.我试图设置如下,但它不工作： .nav-tabs .active a,.nav-tabs .active a:hover,.nav-tabs .active a:focus{ color: #555555; background-color: red; } 任何建议,为什么这不工作,或如何解决？解决

使用Bootstrap v2.3.2,我尝试更改活动选项卡的默认背景颜色.我试图设置如下,但它不工作：

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

任何建议,为什么这不工作,或如何解决？

解决方法

在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片段进行比较,您可以看到,您在.active选择器之前缺少li选择器.
您的CSS是正确的,但它不起作用,因为Bootstrap CSS中的特殊性更多.
所以只需通过增加特性来改变你的代码段：

.nav-tabs > li.active > a,.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/

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!