CSS как применять: first-child и: last-child - PullRequest
Новая
       12

CSS как применять: first-child и: last-child

2 голосов
/ 24 августа 2011

У меня проблема с использованием CSS :first-child и :last-child.

Мне нужно добавить пробел между тегами <a>, для первого тега мне нужно только margin-bottom: 5px и для последнего тега 0px.

Вот мой код .. Что я здесь не так делаю? Любая другая альтернатива? Спасибо 

.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 -->

Ответы [ 2 ]

4 голосов
/ 24 августа 2011

Вам необходимо добавить пробел между .addthis_toolbox и :first-child / :last-child

В противном случае будут выбраны только .addthis_toolbox элементы, которые являются первым или последним дочерним элементом их родителей.

:first-child применяется к элементу, выбирая только элементов, где элемент равен first-child его родителя.

Вы можете прочитатьподробнее о том, как работают псевдоселекторы в спецификации w3c .

3 голосов
/ 24 августа 2011

Для непосредственного исправления того, что вы предоставили, вам нужно: 

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

Проблема с .addthis_toolbox:first-child заключается в том, что он выбирает .addthis_toolbox, который является первым дочерним элементом своего родителя.И это не то, что вы хотели.

Я мог бы запутаться здесь, но если вы пытаетесь добавить разрыв между каждые a, используйте это, чтобы справиться с этим: 

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

Он более аккуратный и имеет лучшую поддержку браузера благодаря отсутствию :last-child.

...