怎么做：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.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个（含）开始的儿童
• :nth-child(-n+8)匹配包括第8个
在内的儿童

这一切如何运作已在您链接到的网站中说明，但前面的示例分别使用: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>