如何在CSS 3中选择同胞元素？

Question

我想在li.active之前和之后选择元素兄弟。

HTML：

<ul class="inline avancement"> 
    <li>Réception des réponses</li> 
    <li class="active">Achat</li> 
    <li>Evaluation</li> 
</ul> 

CSS：

ul.avancement li{ 

padding-right:20px; 
padding-left:10px; 
margin-left:-4px; 
height:37px; 
line-height:37px; 
} 
li.active ~ li{ 
    background:url(../img/delimiter_step_left.png) right top no-repeat; 
    background-color:#ff0000; 
} 
li.active + li{ 
    background:url(../img/delimiter_step_left.png) right top no-repeat; 
    background-color:#999999; 
} 
ul.avancement li{ 
    background:url(../img/delimiter_step.png) right top no-repeat; 
    background-color:#999999; 
    color:white; 
} 
ul.avancement li.active{ 
    background:url(../img/delimiter_step_actif.png) right top no-repeat; 
    background-color:#ff0000; 
} 
ul.avancement li:last-child{ 
    background:none; 
    background-color:#999999; 
} 

但它不工作！

结果：

我等待着红色步激活步之前！怎么了 ？ 谢谢

Answer 1

您不能选择以前的元素与CSS唯一的解决方案！如果你不相信我，请阅读Selectors Level 3。

但是，下一部分可以很容易地完成。

.active + li { 
    color: red; 
} 

的jsfiddle：http://jsfiddle.net/nkp8z/

虽然，你的问题是不是100％清楚 - 你要选择前和旁边直接的所有元素，未标记active，或仅2元活跃的？