引导活动类第n个孩子（）

Question

我有引导的标签，我想更改活动标签的状态，我可以像这样

.side-nav-cat .active { 
    border: 25px solid #888888; 
} 

容易做到这一点，但是我希望有根据不同的风格在nth-child，我曾尝试

.side-nav-cat .active li:nth-child(1) { 
    border-left: 25px solid #888888; 
} 
.side-nav-cat .active li:nth-child(2) { 
    border-left: 25px solid #628179; 
} 

但此剂量不工作，我只是用CSS是有办法做到这一点？

Answer 1

你只需要改变你的选择到：.side-nav-cat li:nth-child(1).active

这选择第一个li与类active你选择它搜索.active类的孩子。

.side-nav-cat li:nth-child(1).active { 
 
    border-left: 25px solid #888888; 
 
} 
 
.side-nav-cat li:nth-child(2).active { 
 
    border-left: 25px solid #628179; 
 
}

<ul class="side-nav-cat"> 
 
    <li class="active">1</li> 
 
    <li class="active">2</li> 
 
    <li class="active">3</li> 
 
</ul>