[CSS]选择器选择前几个或者后几个相同类型的元素

需求说明

需要将某个buttons下面的类名是button的前几个或者后几个按钮筛选出来做特别的CSS处理。

实现

可以利用nth-child(从前数第几个)和nth-last-child(从后数第几个)

还是以上面的例子，我们给button添加background为例：

选择前3个做处理：

.buttons .button:nth-child(-n+3) {
    background: red;
}

选择后1个（最后一个）做处理：

.buttons .button:nth-last-child(-n+1) {
    background: red;
}