Question

我需要为每第5个li应用一种风格，包括第一个li。

我试过了：

nth-child(1n+5)

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

Answer 1

其他方式;你正在寻找:nth-child(5n+1)。

第一个数字是乘数（在这种情况下是每第5个项目），第二个数字是偏移量。偏移量为1，因为你想从第一个项目开始 - 如果你把它关掉它，那么从0开始然后在5日显示。

Answer 2

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

选择第一个li:first-child

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 3

Nenad发布的变化。但是，基本上，您无法将您想要做的事情与单个nth声明相结合。如果你发现自己经常与这类事情作斗争，http://nth-calculator.com/和http://nth-test.com/可能会帮助你：）

＆＃13;

ul {
  list-style-type: decimal
}

li:first-child, li:nth-child(5n) {
  background: blue;
}

＆＃13;

<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>

＆＃13;

每5个孩子都有一个孩子

3 个答案: