Question

我正在使用Twitter bootstrap＆＃39; nav-tabs。我希望将tab-content的所有角都弄圆，除非选择了第一个标签。

所以基本上在这种情况下，当第一个<li>有活动类时，.tab-content＆＃39; s border-top-left-radius应该没有任何内容。

我不确定如何有条件地为第一个标签设置样式？

更新1

好的，我通过在个人tab-pane

上设置样式来实现它

.tab-pane:not(:first-child) {
    background-color: rgb(241, 241,241);        
    border-radius: 5px;
    border-style: solid;
    border-width: 1.0px;
    border-color: #ADADAD;
    padding: 20px;  
}

.tab-pane:first-child{
    background-color: rgb(241, 241,241);  
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;          
    border-style: solid;
    border-width: 1.0px;
    border-color: #ADADAD;
    padding: 20px;  
}

我想知道我是否可以避免重复和结合？

新jsfiddle demo

Answer 1

您可以使用JavaScript或移动tab-content内的<ul> .nav

来执行此操作

Your updated JSFiddle

在导航内移动内容后，您可以添加此

.tab-content {
    clear: both;
}

li:nth-of-type(1).active ~ .tab-content {
  border-top-left-radius: 0
}

Answer 2

我会尝试将.tab-content中的样式移动到.tab-pane，然后您可以为每个.tab-pane使用子选择器。

＆＃13;

.tab-pane {
    background-color: rgb(241, 241,241);        
    border-style: solid;
    border-width: 1.0px;
    border-color: #ADADAD;
    padding: 20px;
}
.tab-pane.active:first-child {
  border-radius: 0 5px 5px 5px;
}

＆＃13;

Answer 3

好吧最后我开始工作了

.tab-pane {
    background-color: rgb(241, 241,241);        
    border-radius: 5px;
    border-style: solid;
    border-width: 1.0px;
    border-color: #ADADAD;
    padding: 20px;  
}

.tab-pane:first-child{    
    border-top-left-radius: 0px;
}

此处正在运作JSFiddle

Answer 4

这样做，申请

ul #main-nav li：first-child.active {

边界左上半径：0;

边界左下半径：0;

}

或者：

ul #main-nav li：first-child.active {

border-radius：0 10px 10px 0;

}

如何有条件地设置border-radius？

4 个答案:

Your updated JSFiddle