CSS如何应用：first-child和：last-child

Question

I have a problem using CSS :first-child and :last-child .

I need add some space between tag <a> for the first tag I need only margin-bottom:5px and for the last tag 0px.

Here my code.. What I'm doing wrong here? Any other alternative? Thanks

.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

You need to add a space between .addthis_toolbox and :first-child / :last-child

Otherwise, it'll only select .addthis_toolbox elements that are the first or last child of their parents.

:first-child is applied to the element, selecting only elements where the element is the first-child of its parent.

You can read more about how the pseudo-selectors work in the w3c spec .

Answer 2

Directly fixing what you provided, you need:

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

The problem with .addthis_toolbox:first-child is that it selects a .addthis_toolbox that is the first child of its parent. And that's not what you wanted.

---

I might be getting confused here, but if you're trying to add a gap between every a , use this to handle it:

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

It's neater and has better browser support due to not using :last-child .