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