nth-childセレクタが機能しないのはなぜですか？

nth-childセレクタを使用して、さまざまなソーシャルアイコンの背景画像を追加しています。ただし、すべてのアイコンが同じように表示されます。私は間違って何をしていますか？nth-childセレクタが機能しないのはなぜですか？

.social-logo { 
 
    display: inline-block; 
 
    width: 24px; 
 
    height: 24px; 
 
    transition: background-image .2s; 
 
} 
 

 
#social-links div:nth-child(1) { 
 
    background-image: url('https://mysql-raigovind93.c9users.io/Cally%20Dai//img/footer/logo-linkedin.svg'); 
 
} 
 

 
#social-links div:nth-child(1):hover { 
 
    background-image: url('https://mysql-raigovind93.c9users.io/Cally%20Dai//img/footer/logo-linkedin-copy.svg'); 
 
} 
 

 
#social-links div:nth-child(2) { 
 
    background-image: url('https://mysql-raigovind93.c9users.io/Cally%20Dai//img/footer/logo-dribbble.svg'); 
 
} 
 

 
#social-links div:nth-child(2):hover { 
 
    background-image: url('https://mysql-raigovind93.c9users.io/Cally%20Dai//img/footer/logo-dribbble-copy.svg'); 
 
} 
 

 
#social-links div:nth-child(3) { 
 
    background-image: url('https://mysql-raigovind93.c9users.io/Cally%20Dai//img/footer/logo-email.svg'); 
 
} 
 

 
#social-links div:nth-child(3):hover { 
 
    background-image: url('https://mysql-raigovind93.c9users.io/Cally%20Dai//img/footer/logo-email-copy.svg'); 
 
} 
 

 
#social-links div:nth-child(4) { 
 
    background-image: url('https://mysql-raigovind93.c9users.io/Cally%20Dai//img/footer/logo-insta.svg'); 
 
} 
 

 
#social-links div:nth-child(4):hover { 
 
    background-image: url('https://mysql-raigovind93.c9users.io/Cally%20Dai//img/footer/logo-insta-copy.svg'); 
 
}

<div id="social-links"> 
 
    <a href=""><div class="social-logo"></div></a> 
 
    <a href=""><div class="social-logo"></div></a> 
 
    <a href=""><div class="social-logo"></div></a> 
 
    <a href=""><div class="social-logo"></div></a> 
 
</div>

出典

2017-01-26 Govind Rai

nth-childセレクタ数の兄弟（同じ親を持つ、すなわち、要素）。

div.social-logoは、常にaの最初の最後の唯一の子です。したがって、nth-childには1つの要素しかカウントされません。

ただし、すべてが兄弟である複数のアンカー要素（#social-linksの子）があるため、nth-childはそれぞれをターゲットにすることができます。

#social-links a:nth-child(1) div 
#social-links a:nth-child(2) div 
#social-links a:nth-child(3) div 
       . 
       . 
       .

出典

2017-01-26 04:56:29

ああ、それはそれを消化するために私にしばらく時間がかかったが、あなたは絶対に正しいです。このルールセット（少なくとも私にとって）はそれほど読みにくいので、この場合、すべてのdivにクラスを追加することをおすすめしますか？ –

nth-childは正常に動作します。あなたはちょうどそれを適切に適用する必要があります。それは常に兄弟を適用する（そしてすべてを数えます）ことを忘れないでください。 –

私は標準的な答え[数年前]に貢献しました（http://stackoverflow.com/questions/4195161/how-can-i-select-an-nth-element-without-knowing-the-parent-element/4195253# 4195253）しかし、これは完全に無関係なトピックについては、それほど考えられなかった質問に対して接線上の点であり、不適切な重複ターゲットとなっていました。私は、 "最初の子と：nth-child（）のようなセレクタは、親要素または子要素に行きますか？"というタイトルの新しい質問に標準的な回答を移行することを考えています。どう思いますか？ – BoltClock

ライブ

<div id="social-links"> 
    <a href=""><div class="social-logo"></div></a> 
    <a href=""><div class="social-logo"></div></a> 
    <a href=""><div class="social-logo"></div></a> 
    <a href=""><div class="social-logo"></div></a> 
</div>

CSS

.social-logo { 
    display: inline-block; 
    width: 24px; 
    height: 24px; 
    transition: background-image .2s; 
} 

#social-links a:nth-child(1) .social-logo { 
    background-image: url('https://mysql-raigovind93.c9users.io/Cally%20Dai//img/footer/logo-linkedin.svg'); 
} 

#social-links a:nth-child(1):hover .social-logo { 
    background-image: url('https://mysql-raigovind93.c9users.io/Cally%20Dai//img/footer/logo-linkedin-copy.svg'); 
} 

#social-links a:nth-child(2) .social-logo { 
    background-image: url('https://mysql-raigovind93.c9users.io/Cally%20Dai//img/footer/logo-dribbble.svg'); 
} 

#social-links a:nth-child(2):hover .social-logo { 
    background-image: url('https://mysql-raigovind93.c9users.io/Cally%20Dai//img/footer/logo-dribbble-copy.svg'); 
} 

#social-links a:nth-child(3) .social-logo { 
    background-image: url('https://mysql-raigovind93.c9users.io/Cally%20Dai//img/footer/logo-email.svg'); 
} 

#social-links a:nth-child(3):hover .social-logo { 
    background-image: url('https://mysql-raigovind93.c9users.io/Cally%20Dai//img/footer/logo-email-copy.svg'); 
} 

#social-links a:nth-child(4) .social-logo { 
    background-image: url('https://mysql-raigovind93.c9users.io/Cally%20Dai//img/footer/logo-insta.svg'); 
} 

#social-links a:nth-child(4):hover .social-logo { 
    background-image: url('https://mysql-raigovind93.c9users.io/Cally%20Dai//img/footer/logo-insta-copy.svg'); 
}

デモ - https://jsfiddle.net/g59wa8uf/

出典

2017-01-26 06:21:28 grinmax

nth-childセレクタが機能しないのはなぜですか？

答えて

関連する問題