每第 5 个孩子有第 n 个孩子 [重复]答案

【问题标题】：Every 5th child with nth-child [duplicate]每第 5 个孩子有第 n 个孩子 [重复]
【发布时间】：2016-07-08 05:51:20
【问题描述】：

我需要每 5 里应用一个样式，包括第一个 li。

我试过了：

nth-child(1n+5)

但这不适用于第一个孩子。我哪里错了？

【问题讨论】：

【解决方案1】：

反过来；你正在寻找:nth-child(5n+1)。

第一个数字是乘数（在这种情况下每 5 个项目），第二个数字是偏移量。偏移量为 1，因为您想从第一项开始 - 如果您将其关闭，它将从第 0 项开始，然后在 5 号显示。

【讨论】：

【解决方案2】：

您可以使用nth-child(5n+5) 选择每5 个元素，然后还可以使用li:nth-child(1) 或li:first-child 选择第一个li

li:nth-child(5n+5), li:nth-child(1) {
  background: blue;
}

<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><li></li><li></li><li></li>
</ol>

【讨论】：

每当我看到有人在使用ul { list-style-type: decimal } 时，我总是忍不住笑出声来，就好像没有办法在 HTML 中标记有序列表一样 ;)

【解决方案3】：

Nenad 发布的内容有所不同。但是，本质上，您不能将您想要做的事情与单个 nth 声明结合起来。如果你发现自己经常与这类事情作斗争，http://nth-calculator.com/ 和 http://nth-test.com/ 可能会帮助你:)

ul {
  list-style-type: decimal
}

li:first-child, li:nth-child(5n) {
  background: blue;
}

<ul>
  <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
</ul>

【讨论】：