0

我有一个导航栏的 ul。在我的 CSS 中，我有一个悬停颜色过渡。这是代码：

HTML：

<body>
<ul>
  <li class="sideBarButton">
    <a href="www.google.com">
     Home
    </a>
  </li>
  <li class="sideBarButton">
    <a href="www.google.com">
     About
    </a>
  </li>
       <li class="sideBarButton">
    <a href="www.google.com">
        Download
    </a>
  </li>
</ul> <!--- Navbar-->
</body>

CSS：

.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;

（抱歉代码有点乱，我一直想对它进行分类并清除不需要的部分。）按钮是图片。我有将两个第一个孩子和最后一个孩子选择器四舍五入的想法，但我认为我在（分层？）选择器中搞砸了，因为当我将一个类分配给完整的 ul 并设置一个 css选择器（例如：.ulClass .sideBarButton:first-child）它什么都不做。我错过了什么，我该如何解决？

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

编辑：为了澄清，我想环绕导航栏的所有四个角。

4

1 回答 1

0

您可以针对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;   
 }

Display:block我还删除了.sideBarButton a导致未应用圆角的违规样式。

清理代码并删除不必要的样式可能是个好主意。

看看这个小提琴http://jsfiddle.net/aSn8C/5/

于 2013-10-18T00:08:43.423 回答