当只有一个孩子可用时，最后一个孩子的风格会超越第一个孩子的风格

Question

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

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

当只有一个孩子时，最后一个孩子的风格超过了第一个孩子的风格。有没有办法同时应用（因为它既是第一个也是最后一个孩子）

我希望在没有JS的帮助下用CSS实现这一目标。感谢。

Answer 1

只需单独应用边框：

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/

Answer 2

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

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

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

如果可能，请使用列表本身ul {border-radius: 5px}上的边框半径。

Answer 3

为什么不将边框半径放在容器上呢？

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/

Answer 4

您也可以使用auto而不是0 px值。 防爆。 （少）：

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

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