:nth-child(n+4):nth-child(-n+8) 如何选择一系列元素？答案

【问题标题】：How does :nth-child(n+4):nth-child(-n+8) select a range of elements?:nth-child(n+4):nth-child(-n+8) 如何选择一系列元素？
【发布时间】：2016-09-08 14:17:11
【问题描述】：

根据http://nthmaster.com/，当通过nth-child为一系列元素设置样式时，我们必须这样做：

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

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

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

【问题讨论】：

标签： css css-selectors

【解决方案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>

【讨论】：