Html CSS3圆角菜单栏，我想我'；我把选择器搞乱了

我有一个ul的导航栏。在我的CSS中，我有一个悬停颜色转换。代码如下：

HTML:

（很抱歉代码有点凌乱，我一直想对它进行排序，去掉不需要的部分。）按钮是图片。我本来想把两个第一个孩子和最后一个孩子的选择器四舍五入，但我想我把选择器搞砸了（分层？），因为当我将一个类分配给完整的ul，并设置一个css选择器（例如：.ulClass.sideBarButton:first child）时，它什么也做不了。我遗漏了什么，我将如何修复它

提前谢谢！（注意：忽略类名，这是一个顶部导航栏，而不是一个侧面，不管它们建议什么！）

---

编辑：为了澄清，我想把导航栏的四个角都画圆

您可以针对

li

而不是类

.ulClass > li:first-child
 {
   border-bottom-left-radius: 4px;
   border-top-left-radius: 4px;   
 }
.ulClass > li:last-child
 {
   border-bottom-right-radius: 4px;
   border-top-right-radius: 4px;   
 }

我还从

.sidebarbuttona

中删除了导致圆角未应用的有问题的样式

Display:block

清理代码并去掉不必要的样式可能是个好主意

---

查看这把小提琴

很抱歉回复太晚。感谢您让我了解显示块，但每当我删除它的图像消失。编辑：没关系，那是我编辑时犯的另一个错误。它仍然不能生成圆边，但我认为这是因为.sideBarButton优先于.ulClass>li，对吗？我设计了一种方法使它工作：但这似乎有很多代码，有什么方法可以简化它吗？我卡住了。

.sideBarButton {
    font-family: Verdana;
    font-size: 14px;
    font-style: normal;
    font-weight: bold;
    font-variant: normal;
    color: #000;
    background-color: #000;
    border: 2px none #FFF;
    clear: none;
    float: left;
    height: auto;
    list-style-type: none;
    display: block;
    width: 90px;
    margin: 0px;
    padding: 0px;
    text-align: center;
    text-align-last: center;
    opacity: 1;
}

.sideBarButton a {
    background-color: #000;
    background-image: url(woodbutton.gif);
    transition: opacity .25s ease-in-out;
    -moz-transition: opacity .25s ease-in-out;
    -webkit-transition: opacity .25s ease-in-out;
    text-align: center;
    text-decoration: none;
    width: 90px;
    display: block;
    color: black;
}
.sideBarButton a:hover {
    opacity: 0.7;

.ulClass > li:first-child
 {
   border-bottom-left-radius: 4px;
   border-top-left-radius: 4px;   
 }
.ulClass > li:last-child
 {
   border-bottom-right-radius: 4px;
   border-top-right-radius: 4px;   
 }