如何使用nth-child选择器实现目标网格布局？现有代码不符合预期

嘿，我来帮你捋清楚这个问题～从你说的用5n+1规则出现一行4个元素的情况，结合你想要的网格布局来看，你应该是想实现**“1个大元素 + 3个小元素”循环重复**的布局模式对吧？

你的5n+1规则是把第1、6、11...个元素设为大的，周期是5，这和你实际需要的4元素周期不匹配，自然会出问题。咱们换个符合布局逻辑的规则就好：

正确的选择器配置 #

假设小元素的宽度设为16%（这样1个48%的大元素 + 3个16%的小元素，加起来是96%，刚好留出行内间隙），需要两组规则：

1. 选中每一组的第一个元素（第1、5、9...个）作为大元素：

.category:nth-child(4n+1) {
  width: 48%;
  max-width: 48%;
}

2. 把剩下的所有元素（每组的第2、3、4个）设为小元素：

.category:not(:nth-child(4n+1)) {
  width: 16%;
  max-width: 16%;
}

为啥这个规则能生效？ #

• 4n+1的周期是4，每4个元素为一组，每组第一个自动变成大尺寸，完美匹配你要的“大+小+小+小”循环；
• :not(:nth-child(4n+1))精准过滤掉所有大元素，给剩下的小元素统一设宽度，这样就不会出现一行挤4个小元素的情况了。

如果是“大+小+小+大”的双大布局？ #

要是你图里的布局是每组两个大元素（第1、4、5、8...个是大的），那规则要改成这样：

/* 选中每组的第1和第4个元素 */
.category:nth-child(4n+1),
.category:nth-child(4n) {
  width: 48%;
  max-width: 48%;
}
/* 选中每组的第2和第3个元素 */
.category:nth-child(4n+2),
.category:nth-child(4n+3) {
  width: 16%;
  max-width: 16%;
}

你可以根据图里的实际布局选对应的规则测试，应该就能达到你想要的效果啦～

内容的提问来源于stack exchange，提问作者JMKelley