CSS3 实现根据ul中li的个数设置li的宽度

NARUTOLUOLUO 2018-09-27

first-child

first-child表示选择列表中的第一个标签

nth-child(n+3)

这个表示选择列表中的标签从第3个开始到最后。

nth-child(2n) 

这个表示选择列表中的偶数标签,即选择 第2、第4、第6…… 标签。

nth-child(2n-1)

这个表示选择列表中的奇数标签,即选择 第1、第3、第5、第7……标签。

nth-child(-n+3)

这个表示选择列表中的标签从0到3,即小于3的标签

nth-last-child(3)

这个表示选择列表中的倒数第3个标签。

li {
    width: 100%;
}

li:first-child:nth-last-child(2), li:first-child:nth-last-child(2) {
    width: 50%;
}

li:first-child:nth-last-child(3), li:first-child:nth-last-child(3) ~ li {
    width: 33.3%;
}

相关推荐