使用nth-child选择元素（）

Question

如何使用css nth-child()概念？li这是之前/之前选定的元素还是活动的li？

<ul> 
    <li><li> 
    <li>i want to select this li</li> 
    <li class="active"></li> 
    <li><li> 
</ul> 

Answer 1

有一个在CSS没有上一个兄弟选择，有下一个相邻的兄弟一个虽然（使用+选择）：

li.active { 
 
    color: red; 
 
} 
 
li.active + li { 
 
    color: green; 
 
}

<ul> 
 
    <li></li> 
 
    <li>This one can't be selected with pure CSS only...</li> 
 
    <li class="active">This is the active one</li> 
 
    <li>This is adjacent to active</li> 
 
</ul>

编辑 - 这里是一个jQuery的方式使用prev()来选择之前的兄弟姐妹：

$("li.active").prev().addClass("prevsibling");

li.active { 
 
    color: red; 
 
} 
 
li.prevsibling, li.active + li { 
 
    color: green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<ul> 
 
    <li></li> 
 
    <li>This one has had a class appended via jQuery!</li> 
 
    <li class="active">This is the active one</li> 
 
    <li>This is adjacent to active</li> 
 
</ul>