怎么做:nth-​​child(n + 4):nth-​​child(-n + 8)选择一系列元素？

Question

根据http://nthmaster.com/,在为nth-child设计一系列元素时,我们必须这样做:

:nth-child(n+4):nth-child(-n+8)

如果我们只使用一个:nth-child(),那么我们会看到它按照该公式设置所有元素的样式.

这两个:nth-child()选择器中的每一个如何抵消另一个对超出范围的元素的影响？

Answer 1

以这种方式组合简单的选择器仅仅意味着您正在寻找同时匹配所有给定条件的元素。组合伪类与组合其他类型的简单选择器没有什么不同，例如div.exampleor input[type="checkbox"]:checked。

所以:nth-child(n+4):nth-child(-n+8)只是意味着既是 :nth-child(n+4)又是 的任何元素:nth-child(-n+8)。单独使用时，这只能是任一选择器的匹配项的子集。

这就是您获得一系列元素的方式。

你如何判断哪些元素将被匹配？简单：查看每个 An+B 表达式中的 B：

• :nth-child(n+4) 匹配从第 4 位（含）开始的孩子
• :nth-child(-n+8) 匹配 8 岁以下的孩子

您链接到的网站中已经说明了这一切是如何工作的，但前面的示例分别使用:nth-child(n+6)和:nth-child(-n+9)，这可能有点令人困惑。这里有一个比较一致的例子来说明两个选择如何结合（忽略::before/ ::after/content在CSS位-只专注于输出）：

li::before {
  content: 'li';
}

li:nth-child(n+4)::before {
  content: 'li:nth-child(n+4)';
}

li:nth-child(-n+8)::after {
  content: ':nth-child(-n+8)';
}

<ol>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ol>