css - 如何在 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 个元素？