CSS3 first-child nth-last-child 响应不同数量宽度

项目中有一个需求,二级导航栏子项目数量不定,但都是均分排列。这时候怎么处理呢?
很容易处理js计算,长度除以个数。js动态计算出来。这样有一个问题,当DOM加载完毕后再js修改样式属性,回发现导航闪一下。
所以css处理是很好的办法。
display:flex是一个不错的办法。然而flex在ie9不支持。无法做到优雅的降级。
在阅读了大漠的文章后发现first-child nth-last-child似乎是一个不错的办法。first-child在ie8能够运用。

/* one item */
a:first-child:nth-last-child(1) {
width: 100%;
}
/* two items */
a:first-child:nth-last-child(2),
a:first-child:nth-last-child(2) ~ a {
width: 50%;
}
/* three items */
a:first-child:nth-last-child(3),
a:first-child:nth-last-child(3) ~ a {
width: 33%;
}
/* four items */
a:first-child:nth-last-child(4),
a:first-child:nth-last-child(4) ~ a {
width: 25%;
}
a:first-child:nth-last-child(5),a:first-child:nth-last-child(5) ~ a {
width:20%;
}

相关阅读:using-css-mod-queries-with-range-selectors

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1、属性选择器:id选择器 # 通过id 来选择类名选择器 . 通过类名来选择属性选择器 ...
    Yuann阅读 1,657评论 0 7
  • 一:在制作一个Web应用或Web站点的过程中,你是如何考虑他的UI、安全性、高性能、SEO、可维护性以及技术因素的...
    Arno_z阅读 1,227评论 0 1
  • 使用纯 CSS 实现 500px 照片列表布局 文章很长,因为介绍了如何一步一步进化到最后接近完美的效果的,不想读...
    HZ充电大喵阅读 2,686评论 0 4
  • 虽然才只是初夏,艳阳已经开始灼烧肌肤,密闭的屋内气流寸步难行。想起花城,那里气温难敌家乡,但裹挟着海水味道的黏湿空...
    子苓00阅读 459评论 0 0
  • 【姓名】袁季 【组名】第三组(风云组) 【释义】学习第一课后做的笔记,仅提取个人最最收获至宝的部分予以呈现,以下为...
    小倪女阅读 282评论 4 1