Question

我有一个导航栏的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）它没有做任何事情。我错过了什么，我将如何解决它？

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

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

Answer 1

您可以定位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/

带有圆角的CSS3菜单栏，我想我搞砸了选择器

1 个答案: