css: nth-child случайно пропускает элемент списка - PullRequest
Новая
       19

css: nth-child случайно пропускает элемент списка

1 голос
/ 07 апреля 2011

Я пишу здесь после попытки решить мою проблему в течение нескольких дней. У меня есть неупорядоченный список, элементы списка которого содержат несколько вещей, включая div, который я использую для отображения изображения, полученного из спрайта.

Вот HTML: 

<ul class="upperList clearfix">
            <li>
                <h3>Kit détecteur extérieur images</h3>
                <p></p>
                <div class="extrasLiBg"></div>
                <p class="description">Lorem ipsum dolor sit amet, consectetur adipisicing
                elit, sed do eiusmod tempor incididunt ut labore et dolore magna
                aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
                laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
                in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
                pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
                qui officia deserunt mollit anim id est laborum.</p>
            </li>
            <li>
                <h3>Bouton anti hold-up avec capture d'images</h3>
                <div class="extrasLiBg"></div>
            </li>
            <li>
                <h3>Pendentif Verisure [me]</h3>
                <div class="extrasLiBg"></div>
            </li>
        </ul>

А вот и CSS: 

    .extrasLiBg {
    width:100px;
    height:100px;
    position:absolute;
    bottom:0;
    right:0;
    overflow:hidden;
    background:url('images/extras-sprite.jpg') no-repeat;
}

.extras .upperList li:nth-child(2) .extrasLiBg {background-position:-100px 0;}
.extras .upperlist li:nth-child(3) .extrasLiBg {background-position:-200px 0;}

Моя проблема в том, что div внутри последнего элемента списка почему-то отказывается сдвигать фоновое изображение и, таким образом, отображает первое, верхнее левое изображение в спрайте ... Это сводит меня с ума, на странице тоже есть другие списки, и у их div нет проблем с отображением правой части спрайта ...

Я использую Chrome 10, но проблема остается в Firefox, Safari и Opera (самые последние выпуски).

Спасибо за любую помощь.

1 Ответ

8 голосов
/ 07 апреля 2011

В селекторе для третьего дочернего элемента измените .upperlist на .upperList.

...