我想选择 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;
}
但它不起作用!
结果:
我在等待事件步骤之前的红色步骤!怎么了 ? 谢谢
最佳答案
您不能使用纯 CSS 解决方案选择上一个元素!阅读Selectors Level 3如果你不相信我的话。
然而,接下来的部分可以很容易地完成。
.active + li {
color: red;
}
jsFiddle:http://jsfiddle.net/nkp8z/
尽管您的问题不是 100% 清楚 - 您是要选择所有未标记为 active
的元素,还是只选择事件元素之前和旁边的 2 个元素?
关于css - 如何在 CSS 3 中选择兄弟元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15390622/