引导CSS活动选项卡继承样式

Question

我建立一个标签系统，并与已经应用的每个选项卡的一些风格的一次积极使用.acive类，我能做到这一点，像这样

.side-nav-cat li:nth-child(2).active:after { 
    content: ""; 
    position: absolute; 
    height: 0; 
    width: 0; 
    left: 100%; 
    top: 0; 
    border: 25px solid transparent; 
    -webkit-transition: all 0.1s ease-in-out; 
    -moz-transition: all 0.1s ease-in-out; 
    -ms-transition: all 0.1s ease-in-out; 
    transition: all 0.1s ease-in-out; 
    border-left: 25px solid #628179; 
} 

我怎么过不与重复每nth-child

所有相同的代码，所以我尝试了下面的代码，所以我只需要包括border-left: 25px solid color;每一个人nth-child，我似乎无法得到nth-child从.side-nav-cat li:after .active

继承所有样式

任何想法为什么以及如何解决它？ 谢谢。

.side-nav-cat li:after .active { 
    content: ""; 
    position: absolute; 
    height: 0; 
    width: 0; 
    left: 100%; 
    top: 0; 
    border: 25px solid transparent; 
    -webkit-transition: all 0.1s ease-in-out; 
    -moz-transition: all 0.1s ease-in-out; 
    -ms-transition: all 0.1s ease-in-out; 
    transition: all 0.1s ease-in-out; 
    border-left: 25px solid #628179; 
} 

.side-nav-cat li:nth-child(2).active:after { 
    border-left: 25px solid red; 
} 

.side-nav-cat li:nth-child(2).active:after { 
    border-left: 25px solid blue; 
} 

Answer 1

你的第一选择与类的.active寻找一个元素的<li>内;而不是寻找类别为.active的<li>。

下面应该工作;

.side-nav-cat li.active:after { 
    content: ""; 
    position: absolute; 
    height: 0; 
    width: 0; 
    left: 100%; 
    top: 0; 
    border: 25px solid transparent; 
    -webkit-transition: all 0.1s ease-in-out; 
    -moz-transition: all 0.1s ease-in-out; 
    -ms-transition: all 0.1s ease-in-out; 
    transition: all 0.1s ease-in-out; 
    border-left: 25px solid #628179; 
} 

.side-nav-cat li:nth-child(2).active:after { 
    border-left: 25px solid red; 
} 

.side-nav-cat li:nth-child(2).active:after { 
    border-left: 25px solid blue; 
}