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。