当只有一个孩子可用时，Last-child风格超越了first-child风格 [英] Last-child style over-rides first-child style when only one child is available

问题描述

>

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

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

当只有一个孩子时，last-child style over-ride -child风格。是否有一种方法来应用这两个（因为它是第一个和最后一个孩子）

When there's just once child, the last-child style over-rides the first-child style. Is there a way to apply both (since it is both the first and last child)

我想用CSS实现这一点，没有JS的帮助。感谢。

Am looking to achieve this with just CSS, without the aid of JS. Thanks.

推荐答案

只需单独应用您的边框：

Just apply your borders individually:

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

这样最后应用的规则不会覆盖以前的规则code> border-radius：5px 5px 0 0;

That way the last-applied rule doesn't override the previous rule (border-radius: 5px 5px 0 0; resets the bottom border radii back to zero).

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

这篇关于当只有一个孩子可用时，Last-child风格超越了first-child风格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！