javascript - 被特殊的 CSS 案例混淆

Question

我在看this视频，它是 Brackets IDE 的简短演示。我是 Web 开发的新手，所以我预计会被我看到的代码弄糊涂，但其中有些东西我真的不明白。在 8 分钟左右，这家伙调出 css 行 .galleryItem:nth-child(4n+1) 说它只会影响网格中每一行的第一个元素，因为 :nth-child(4n+1) 谁能解释一下这一行的语法以及如何使用它。

附言对于那里的 Bret Victor 粉丝来说，Brackets 似乎在做他的一些事情。

Answer 1

这里的想法很简单，每行中可能有四个元素，因此使用 4n+1 将影响每行中的第一个元素，因为它针对的是第 1、5、9 等。总体.

我认为 4n 部分可以被认为是模除法匹配器(匹配 mod 4 = 0 的所有地方)，而 +1 只是将 1 向右移动。因此它包括所有 4 的倍数，每个都加 1。由于 0 在技术上是 4 的倍数，因此第一项也包含在此列表中。