:nth-child 在两个固定索引之间

前几天我需要选择两个固定索引之间的某些元素，例如从第二个到第五个元素。具有讽刺意味的是，我有一篇关于 “有用的 :nth-child 食谱” 的完整文章，但这并不是其中之一。

事实证明，答案并不那么复杂。但它确实让我有点费解。

假设您想选择从第二个开始的所有 div

div:nth-child(n + 2) {

}
/* [ ]  [x]  [x]  [x]  [x]  [x]  [x]  [x], etc. */

这对我来说很有逻辑意义。如果 n 为 0，则表达式为 2，并且 n 从那里向上递增并选择其后的所有内容。

但是，您如何才能在特定索引处“停止”选择呢？例如…

/* Not real */
div:nth-child(minmax(2, 5)) {

}
/* [ ]  [x]  [x]  [x]  [x]  [x]  [ ]  [ ], etc. */

好吧，我们可以做相反的事情，只选择第一组元素，然后通过反转 n 的值来停止（向另一个方向约束）。

div:nth-child(-n + 6) {

}
/* [x]  [x]  [x]  [x]  [x]  [ ]  [ ]  [ ], etc. */

这将选择前五个元素，然后停止，因为随着 n 变大，表达式的值变为 0 并进入负数。

因此，这里的 CSS 技巧是结合这两个 :nth-child 表达式。

我们知道 CSS 伪选择器在某种意义上是累加的，即它们必须同时为真才能选择它们。

a:first-child:hover {
  /* selects the <a> if it is BOTH the first child and in a hover state */
}

为了实现“2 及以上”和“5 及以下”的想法，我们将伪选择器链接起来

div:nth-child(n + 2):nth-child(-n + 6) {
  background: green;
}

这就行了

让我感到困惑的部分是思考“累加”伪选择器。我以为选择“2 及以上”只会这样做，“5 及以下”只会这样做，而这两者的组合意味着“所有元素”。但这完全是错误的想法。是条件是累加的，这意味着每个元素都必须满足这两个条件。

如果您像我一样发现这令人困惑，请等待您查看 Quanity Queries。通过嵌套许多 nth 样式的伪选择器，您可以构建逻辑，例如，仅根据 DOM 中有多少个元素来选择元素。

div:nth-last-child(n+2):nth-last-child(-n+5):first-child, 
div:nth-last-child(n+2):nth-last-child(-n+5):first-child ~ div {
  /* Only select if there are at least 2 and at most 5 */
}

Una 之前为我们进一步分解了这个问题。