css - 更好的第 n 个子选择器

Question

我的 LESS 是这样的，

.img-preview {
   &:first-child:nth-last-child(6),
   &:first-child:nth-last-child(6) ~ a:nth-child(2),
   &:first-child:nth-last-child(6) ~ a:nth-child(3),
   &:first-child:nth-last-child(6) ~ a:nth-child(4),
   &:first-child:nth-last-child(6) ~ a:nth-child(5) {}
}

如您所见，如果只有 6 个子元素，我将尝试选择除最后一个元素之外的所有元素。除了像上面那样重复编写代码，有没有更好的方法来编写它。

我已经尝试了以下，但是在编译时它给出了错误。

.img-preview {
       &:first-child:nth-last-child(6) ~ a:not(:last-child) {}
}

Answer 1

~ a:not(:last-child) 部分匹配第一个 child 之后的元素，因此不是第一个 child 本身。您仍然需要为此选择 &:first-child:nth-last-child(6):

.img-preview {
    &:first-child:nth-last-child(6),
    &:first-child:nth-last-child(6) ~ &:not(:last-child) {}
}