1

前後の要素兄弟を選択したいのですが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;
}

しかし、それは機能しません！

結果 ：

ここに画像の説明を入力してください

アクティブなステップの前に赤いステップを待っています！どうしたの ？ありがとう

4

1 に答える 1

1

CSSのみのソリューションでは前の要素を選択することはできません！あなたが私を信じていないなら、セレクターレベル3を読んでください。

ただし、次の部分は非常に簡単に実行できます。

.active + li {
    color: red;
}

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

あなたの質問は100％明確ではありませんが、マークされていないすべての要素を選択しますactiveか、それともアクティブな要素の直前と隣にある2つの要素だけを選択しますか？

于 2013-03-13T16:24:51.587 に答える