引導活動類第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>