当只有一个孩子可用时,Last-child风格超越了first-child风格 [英] Last-child style over-rides first-child style when only one child is available
本文介绍了当只有一个孩子可用时,Last-child风格超越了first-child风格的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
>
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屋!
查看全文