列表元素上的边框半径？

Question

我想给一组项目添加边框半径，但我不想将样式应用于每个项目。当前，我的样式使奇数列表元素具有一种颜色，而偶数元素则具有较深的颜色。当我将border-radius应用于li时，它对每一行都可见，但我只想将其应用于第一个项目和最后一个项目。如何在不为仅这两个列表项创建特殊ID或类的情况下实现此目标？

以下是我的HTML和CSS：

<section id="list">
<ul>
        <li>Song 1</li>
        <li>Song 2</li>
        <li>Song 3</li>
    </ul>
</section>

ul{
list-style:none;
padding-left:0px;
width:600px;
}

ul li:nth-child(odd){
background: rgba(12,147,0,0.4);
}

ul li:nth-child(even){
background: rgba(12,147,0,0.7);
}

li{
padding:15px;
border-radius: 20px;
}

- Nicole Roen

---

你的第一个 ul li:nth-child(even) 应该是 ul li:nth-child(even):hover，我确定。实际上，这两个 hover 规则可以简化为选择器 ul li:hover。 - BoltClock

关于边框半径，您是指您只想将整个列表的顶部和底部角落变圆吗？ - BoltClock

你的回答的第一部分是无关紧要的，因为我放错了代码，现在已经编辑过我的帖子了。但是，是的，我想让整个列表的顶部和底部角都是圆角的。 - Nicole Roen

Answer 1

使用 :first-child 和 :last-child

li:first-child, li:last-child{
    padding:15px;
    border-radius: 20px;
}

- David Wick

---

我认为你不应该那样随意使用伪类。结果非常尴尬：http://jsfiddle.net/BoltClock/AQYTF - BoltClock

你们俩帮我解决了这个问题。如果写成这样： li{ padding:15px; } li:first-child{ border-top-left-radius:20px; border-top-right-radius: 20px;} li:last-child{border-bottom-left-radius: 20px; border-bottom-right-radius:20px; } - Nicole Roen