css - :nth-child(n+4):nth-child(-n+8) select a range of elements?如何

Question

根据 http://nthmaster.com/ ，当 nth-child 对一系列元素进行样式化时，我们必须这样做:

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

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

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

Answer 1

以这种方式组合简单的选择器意味着您正在寻找同时匹配所有给定条件的元素。组合伪类与组合其他类型的简单选择器没有什么不同，例如 div.example 或 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 个(含)开始的 child
• :nth-child(-n+8) 匹配第 8 个及第 8 个 child

您链接到的网站中已经说明了这一切的工作原理，但前面的示例使用 :nth-child(n+6) 和 :nth-child(-n +9) 分开，这可能有点困惑。这里有一个更一致的例子来说明这两个选择器是如何组合的(忽略 CSS 中的 ::before/::after/content 位 —只关注输出):

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>