代替要素の背景色を変更する

Question

代替要素の色を変更したいが、コードが機能していない。私のコードは、コンテナ要素全体の色を変更します。

誰でもコードを間違えていると教えてください。あなたはjsfiddleを持ってここに

.pvt-msg-panel { 
 
    height: 92vh; 
 
    float: left; 
 
    margin-top: -20px; 
 
} 
 
#pvt-messages-box { 
 
    height: 50vh; 
 
    width: 650px; 
 
    margin-top: 10px; 
 
    margin-left: 10px; 
 
    overflow-y: scroll; 
 
} 
 
.pvt-messages-box-item { 
 
    padding: 10px; 
 
    padding-left: 20px; 
 
    position: relative; 
 
    display: inline-block; 
 
    width: 100%; 
 
    color: black; 
 
    padding-left: 20px; 
 
    font-size: 12px; 
 
    cursor: pointer; 
 
} 
 
.pvt-messages-box-item:nth-child(odd) { 
 
    background-color: green; 
 
} 
 
.pvt-messages-box-item:nth-child(even) { 
 
    background-color: white; 
 
}

<div class="pvt-msg-panel"> 
 
    <section id="pvt-messages-box"> 
 
    <span class="pvt-messages-box-item"><span><img src="images/avatar2.png"></span>message 1</span> 
 
    <br> 
 
    <span class="pvt-messages-box-item"><span><img src="images/avatar2.png"></span>message 2</span> 
 
    <br> 
 
    <span class="pvt-messages-box-item"><span><img src="images/avatar2.png"></span>message 3</span> 
 
    <br> 
 
    </section> 
 
</div>

Answer 1

first-childセレクタを使用している場合、brタグはevenセレクタをピックアップしようとします。 nth-of-typeセレクタを使用してみてください。

これをチェックしてフィードバックをお送りください。ありがとう！

.pvt-msg-panel{ 
 
    height: 92vh; 
 
    float: left; 
 
    margin-top: -20px; 
 
} 
 
#pvt-messages-box{ 
 
    height: 50vh; 
 
    width: 650px; 
 
    margin-top: 10px; 
 
    margin-left: 10px; 
 
    overflow-y: scroll; 
 
} 
 
.pvt-messages-box-item{ 
 
    padding:10px; 
 
    padding-left: 20px; 
 
    position: relative; 
 
    display: inline-block; 
 
    width: 100%; 
 
    color: black; 
 
    padding-left: 20px; 
 
    font-size: 12px; 
 
    cursor: pointer; 
 
} 
 

 
.pvt-messages-box-item:nth-of-type(odd){ 
 
    background-color: green; 
 
} 
 
.pvt-messages-box-item:nth-of-type(even){ 
 
    background-color: white; 
 
}

<div class="pvt-msg-panel"> 
 
    <section id="pvt-messages-box"> 
 
     <span class="pvt-messages-box-item"><span><img src="images/avatar2.png"></span>message 1</span><br> 
 
     <span class="pvt-messages-box-item"><span><img src="images/avatar2.png"></span>message 2</span><br> 
 
     <span class="pvt-messages-box-item"><span><img src="images/avatar2.png"></span>message 3</span><br> 
 
    </section> 
 
</div>

Answer 2

。 span

.pvt-messages-box-item:nth-of-type(odd){ 
    background-color: green; 
} 

.pvt-messages-box-item:nth-of-type(even){ 
    background-color: white; 
} 

ためnth-of-type(odd)を使用します。要素は、その親の指定された子である場合n番目の子が一致しました。 div内の
要素によって、セレクタの奇数部分と偶数部分が両方とも親の奇数の子（1番目と3番目）になるため、失敗します。

Answer 3

OK私はあなたの問題を発見しました。

まず私のジェット脳にコードをコピーして、そのように見えるのですか？

background-color: red; 

と完全に赤になった背景：

は、私はそのようなコードを変更した場合。だから問題はここにある、なぜ？

最初にsectionの最初のchildElementはspan.pvt-message-box-item：nth-​​child（1）でも空白で、2番目のchildElementはそのような要素ではありません。 3番目の要素は同じで、最初のspan要素と2番目の要素の間の空白でもあります。この場合、背景色を変更する場合は、このような解像度を使用します。奇数と偶数奇数と偶数1/3/5に置き換えなどの実際の数でCSSを変更して、その結果があなたのリクエストにOK表示されます：