11

在此处输入图像描述

ul li:first-child a {
   border-radius: 5px 5px 0 0;
}

ul li:last-child a {
   border-radius: 0 0 5px 5px;
}

当只有一个孩子时，最后一个孩子的样式会覆盖第一个孩子的样式。有没有办法同时应用（因为它是第一个和最后一个孩子）

我希望在没有 JS 的帮助下仅使用 CSS 来实现这一点。谢谢。

4

4 回答 4

19

只需单独应用您的边框：

ul li:first-child a {
   border-top-left-radius: 5px;
   border-top-right-radius: 5px;
}

ul li:last-child a {
   border-bottom-left-radius: 5px;
   border-bottom-right-radius: 5px;
}

这样，最后应用的规则不会覆盖前一个规则（border-radius: 5px 5px 0 0;将底部边框半径重置为零）。

演示：http: //jsfiddle.net/vUz5Z/5/

于 2012-07-18T09:13:46.407 回答
6

您可以使用:only-child. 只需添加

ul li:only-child a {
   border-radius: 5px;
}

在他们之后。它在 IE8（或更早版本）中不起作用，但我猜这不是问题，因为border-radius在 IE8 中也不起作用。

ul {border-radius: 5px}或者如果可能的话，使用列表本身的边界半径。

于 2012-07-18T09:23:12.183 回答
1

为什么不把边界半径放在容器上呢？

ul,li { margin:0; padding:0; list-style:none; }
ul { border-radius: 10px; overflow:hidden }
a { display:block; margin-bottom:2px; padding:3px; background-color:#f00 }
ul li:last-child a {
 margin: 0;
} ​

http://jsfiddle.net/BanEg/

于 2012-07-18T09:18:19.197 回答
1

您还可以使用 0px 值的 auto insead。前任。（较少的）：

&:first-child{
    .border-radiuses (5px, auto, auto, 5px);

}
&:last-child{
    .border-radiuses (auto, 5px, 5px, auto);
}
于 2013-01-07T09:53:47.097 回答