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，但问题仍然存在于 Firefox、Safari 和 Opera（最新版本）中。

感谢您的帮助。

Answer 1

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