ul li last-child radius不工作

Question

我希望我的最后一个列表项在右边有圆角,但它不起作用.无法通过我的自我解决,尝试了一切,到处搜索.

#navigation {
  float: left;
  border: 1px solid #C0C0C0;
  border-radius: 20px;
  background: linear-gradient(#64717E, #E5E3DE);
  box-shadow: 2px 2px 15px #64717E inset, 0 0 20px #000;
}
#navigation ul {
  height: 20px;
  margin: 0;
  padding: 0;
}
#navigation ul li {
  padding: 0 15px 0 15px;
  display: inline;
  //		border: 2px solid #C0C0C0;
  background: linear-gradient(#64717E, #C0C0C0, #64717E);
  list-style-type: none;
}
#navigation ul li:first-child {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}
#navigation ul li:last-child {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

<div id="navigation">
  <ul>
    <li><a href="#">start<a></li>
	<li><a href="#">imperdiet<a></li>
	<li><a href="#">condimentum<a></li>
	<li><a href="#">nunc<a></li>
	<li><a href="#">phasellus<a></li>
  </ul>
</div>

对于html和css的其余部分的反馈表示赞赏.

Answer 1

你的问题是你没有关闭你的<a>标签,而是打开一个<a>甚至不是有效的嵌套标签.

这意味着你的ul li:first-child作品,因为你的第一个孩子存在且有效,但随后<a>标签永远不会关闭,因此浏览器会感到困惑,并且永远不知道aa在哪里last-child.

只需关闭你的<a>标签.

<div id="navigation">
    <ul>
        <li><a href="#">start</a></li>
        <li><a href="#">imperdiet</a></li>
        <li><a href="#">condimentum</a></li>
        <li><a href="#">nunc</a></li>
        <li><a href="#">phasellus</a></li>
    </ul>
</div>

JSFiddle示例