css：nth-​​child随机跳过列表项

Question

我在尝试自己解决问题几天之后就在这里发帖了。我有一个无序列表，其列表项包含几个东西，包括我用来显示来自精灵的图像的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 btw，但问题仍然存在于Firefox，Safari和Opera（最新版本）中。

感谢您的帮助。

Answer 1

在第三个孩子的选择器中，将.upperlist更改为.upperList。