使用Bootstrap v2.3.2,我试图更改活动标签的默认背景颜色。我试图设置如下,但它不起作用:
.nav-tabs > .active > a,
.nav-tabs > .active > a:hover,
.nav-tabs > .active > a:focus
{
color: #555555;
background-color: red;
}
关于为什么这不起作用或如何解决它的任何建议?
答案 0 :(得分:30)
在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/
答案 1 :(得分:0)
在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插件选项卡的活动选项卡突出显示问题。