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

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}如果可能的话,使用列表本身的边界半径.