Смущенный специальным футляром CSS

Question

Я смотрел this видео, это короткая демонстрация для IDE скобок. Я новичок в веб-разработке, поэтому я ожидаю, что меня смущает код, который я вижу, но там что-то есть, чего я действительно не понимаю. Вокруг 8-минутной отметки парень поднимает строку css .galleryItem:nth-child(4n+1) Говоря, что это повлияет только на первый элемент в каждой строке сетки из-за :nth-child(4n+1), может кто-нибудь объяснить синтаксис этой строки и как ее можно использовать.

P.S. Для вас поклонники Брет Виктор там, скобки, кажется, делают некоторые из его вещей.

Answer 1

Идея здесь состоит в том, что в каждой строке есть, вероятно, четыре элемента, поэтому использование 4n + 1 будет влиять на первый элемент в каждой строке, поскольку он нацелен на 1-й, 5-й, 9-й и т. Д. общий.

Я думаю, что 4n-часть можно рассматривать как разделитель по модулю (совпадает везде, где mod 4 = 0), а +1 просто сдвигает 1 вправо. Таким образом, он включает в себя все кратные 4, каждый с 1 добавленным. И так как 0 технически кратно 4, первый элемент также включен в этот список.