难题

对于 CSS 选择符来说，基于兄弟元素的总数来匹配元素并不简单。设想一个列表，假设 仅当列表项的总数为 4 时 才对这些列表项设置样式。我们可以用 li:nth-child(4) 来选中列表的第四个列表项，但这并不是我们想要的；我们需要 在列表项的总数为 4 时 选中 每一个 列表项。

解决方案

这个方法需要的代码还是冗长繁琐的，我们可以用预处理器优化。

根据兄弟元素的数量范围来匹配元素

列表项的总数是 4 或者更多时选中所有列表项：

列表项的总数是 4 或者更少时，选中所有列表项：

我们也可以把两种技巧组合起来使用，假设我们希望在列表包含 2 ～ 6 个列表项时命中所有的列表项。