css - 列表的最后一个子伪类不起作用

Question

我在列表中使用的 last-child 伪类不起作用。JSFiddle：http: //jsfiddle.net/yuvLk/

HTML：

<ul class="categories">
    Categories
    <li>{category_name}</li>
    <li>{category_name}</li>
    <li>{category_name}</li>
    <li>{category_name}</li>
<ul>

CSS：

ul.categories {
   text-align: center;
}

ul.categories li {
    list-style-type: none;
    background: #E6E6E6;
    width: 250px;
    height: 40px;
}

ul.categories li:first-child{
    -webkit-border-radius: 25px 25px 0 0;
    border-radius: 25px 25px 0 0;
}

ul.categories li:last-child {
    -webkit-border-radius: 0px 0px 32px 32px;
    border-radius: 0px 0px 32px 32px;
}

我在 Google 上搜索了一下，并在 StackOverflow 上看到了一些关于跨浏览器问题的帖子。我不是在询问跨浏览器问题，我使用的是 Chrome v23，last-child 应该可以工作。

我忽略了什么/做错了什么？

Answer 1

简单的错字：你写<ul>的不是</ul>，所以最后一个<li>并不是最后一个孩子。

更正示例：http: //jsfiddle.net/yuvLk/1/