有时候可能我们会有这样一种需求
当div内有1个元素时应用某种样式,当div内有2个元素时又利用不同的样式。。。。以此类推。
但是CSS中除了only-child可以选择只有一个元素的情况,那么别的情况怎么办?
/* 一个元素时 */
li:first-child:nth-last-child(1) {
/* -或者可以使用- li:only-child { */
width: 100%;
}
/* 两个元素时 */
li:first-child:nth-last-child(2),
li:first-child:nth-last-child(2) ~ li {
width: 50%;
}
/* 三个元素时 */
li:first-child:nth-last-child(3),
li:first-child:nth-last-child(3) ~ li {
width: 33.3333%;
}
/* 四个元素时 */
li:first-child:nth-last-child(4),
li:first-child:nth-last-child(4) ~ li {
width: 25%;
}
/*以此类推*/
这个Trick的诀窍是当选择第一个节点时,它同时也是最后一个节点。这样就可以有效地根据节点的数量进行选择。
这项技术归功于AndréLuís(发现)和Lea Verou(精炼)。
资料来源:
http://andr3.net/blog/post/142 (AndréLuís)
http://lea.verou.me/2011/01/styling-children-based-on-their-number-with-css3/
(Lea Verou)