列表元素的边界半径?

时间:2011-07-20 16:07:34

标签: css css3

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

1 个答案:

答案 0 :(得分:4)

使用:first-child:last-child

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