html - 在 css 中乘法的第 n 个 child

Question

我有一个日历布局，它有行和列，每一行肯定会有 7 列，因为一周有 7 天。如何使用 css 定位每行的最后一项？

我卡在这了

li:nth-child(7)
li:nth-child(14)

等等

有没有更好的方法来做到这一点，比如在 css 中使用数学？

Answer 1

您可以使用 li:nth-child(7n) 。

This way it will only target the 7th element of li everytime.

*{margin:0pc; padding:0px; box-sizing:border-box;}
li{ width:14.287%; display:inline-block;}
li:nth-child(7n){ color:red;}

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

</ul>