列表元素的边框半径？答案

【问题标题】：Border-radius on list elements?列表元素的边框半径？
【发布时间】：2011-07-21 00:40:34
【问题描述】：

我想为项目列表添加边框半径，但我不希望每个项目都应用样式。现在我的风格有一种颜色的奇数列表元素和更深颜色的偶数元素。当我将边框半径应用于 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;
}

【问题讨论】：

你的第一个 ul li:nth-child(even) 应该是 ul li:nth-child(even):hover，我敢肯定。实际上，这两个悬停规则可以简单地压缩为选择器ul li:hover。
至于边框半径，你的意思是想让整个列表的顶角和底角变圆吗？
您的答案的第一部分是无关紧要的，因为我输入了错误的代码并且已经编辑了我的帖子。但是，是的，我希望整个列表的顶角和底角是圆角的。

标签： css

【解决方案1】：

使用:first-child 和:last-child

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

【讨论】：

我认为你不应该只应用这样的伪类。结果很尴尬：jsfiddle.net/BoltClock/AQYTF
你们都帮我弄清楚了。如果这样写： li{ padding:15px; } li:first-child{border-top-left-radius:20px;边框右上角半径：20px； } li:last-child{border-bottom-left-radius: 20px;边框右下角半径：20px； }