CSS comment appliquer: premier-enfant et: dernier-enfant

Question

J'ai un problème en utilisant CSS :first-child et :last-child.

J'ai besoin d'ajouter un peu d'espace entre l'étiquette <a> pour la première étiquette J'ai seulement besoin de marge-bas: 5px et pour la dernière étiquette 0px.

Voici mon code .. Qu'est-ce que je fais mal ici? Toute autre alternative? Merci

.addthis_toolbox.atfixed 
    { 
     border: 1px solid #eee; 
     padding: 5px; 
     width: 32px; 
    } 
    .addthis_toolbox:first-child 
    { 
     margin-bottom:5px; 
    } 
    .addthis_toolbox:last-child 
    { 
    margin-bottom:0px; 
    } 

---

<!-- AddThis Button BEGIN --> 
<div class="addthis_toolbox addthis_32x32_style atfixed"> 
    <a class="addthis_button_preferred_1"></a> 
    <a class="addthis_button_preferred_2"></a> 
    <a class="addthis_button_preferred_3"></a> 
    <a class="addthis_button_preferred_4"></a> 
    <a class="addthis_button_compact"></a> 
</div> 
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4e55018a5d405a71"></script> 
<!-- AddThis Button END --> 

Answer 1

fixant directement ce que vous avez fourni, vous avez besoin:

.addthis_toolbox a:first-child 
{ 
    margin-bottom:5px; 
} 
.addthis_toolbox a:last-child 
{ 
margin-bottom:0px; 
} 

Le problème avec .addthis_toolbox:first-child est qu'il sélectionne un .addthis_toolbox qui est le premier enfant de son parent. Et ce n'est pas ce que tu voulais.

---

je pourrais être se confondre, mais si vous essayez d'ajouter un écart entre chaquea, utilisez ce pour y faire face:

.addthis_toolbox a + a { 
    margin-top: 5px; 
} 

Il est plus propre et a un meilleur support du navigateur en raison de ne pas utiliser :last-child.

Answer 2

Vous devez ajouter un espace entre .addthis_toolbox et :first-child/:last-child

Sinon, ça ne va sélectionner .addthis_toolbox éléments qui sont le premier ou le dernier enfant de leurs parents.

:first-child est appliquée à l'élément, en sélectionnant seulement éléments où l'élément est la first-child de son parent. Vous pouvez en savoir plus sur le fonctionnement des pseudo-sélecteurs dans w3c spec.