被特殊的 CSS 案例迷惑

Question

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

附：对于你们布雷特维克多的粉丝来说，括号似乎做了他的一些事情。

Answer 1

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

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