Question

我的情况就是这样，

.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)部分匹配第一个孩子之后的元素，因此不是第一个孩子本身。您仍需要为此选择&:first-child:nth-last-child(6)：

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

更好的nth-child选择器

1 个答案: