css - 如何有条件地设置边界半径？

Question

我正在使用 Twitter Bootstrap 的 nav-tabs .我想把tab-content的所有 Angular 都做成除非选择了第一个选项卡，否则四舍五入。

所以基本上在这种情况下，第一个 <li>有事件类.tab-content的 border-top-left-radius应该什么都没有。

我不确定如何有条件地为第一个选项卡设置样式？

这是 JSFiddle Demo

更新 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>里面导航

Your updated JSFiddle

将内容移动到导航中后，可以添加这个

.tab-content {
    clear: both;
}

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