CSS Grid中行内特定元素的最优选择方法：实现奇偶行内奇偶项差异化样式

嘿，你不用再硬编码每个nth-child的序号啦！这个需求可以通过CSS的:nth-child()公式选择器来实现，完全不需要写死具体数字，扩展性拉满～

核心思路 #

你的网格是4列布局，每一行有4个元素，而需求的样式规律是每两行（共8个元素）形成一个重复的模式：

• 奇数行（第1、3、5...行）：奇数索引的.test变红，偶数索引的变蓝
• 偶数行（第2、4、6...行）：偶数索引的.test变红，奇数索引的变蓝

基于这个周期（8个元素），我们可以用nth-child(an + b)的公式来精准匹配目标元素。

完整实现代码 #

#ct { 
  display: grid; 
  grid-template-columns: repeat(4, minmax(0, 1fr)); 
  grid-row-gap: 10px; 
  grid-column-gap: 10px; 
}
.test { 
  height: 100px; 
}
/* 匹配奇数行的奇数项 + 偶数行的偶数项 */
.test:nth-child(8n + 1),
.test:nth-child(8n + 3),
.test:nth-child(8n + 6),
.test:nth-child(8n + 8) { 
  background-color: red; 
}
/* 匹配剩余元素，也可以用公式单独写，效果一致 */
.test:not(:nth-child(8n + 1)):not(:nth-child(8n + 3)):not(:nth-child(8n + 6)):not(:nth-child(8n + 8)) { 
  background-color: blue; 
}

公式解释 #

这里的8n代表每8个元素重复一次规律（因为4列×2行=8），后面的数字对应每个周期内的目标位置：

• 8n + 1：第1、9、17...个元素（奇数行第1列）
• 8n + 3：第3、11、19...个元素（奇数行第3列）
• 8n + 6：第6、14、22...个元素（偶数行第2列）
• 8n + 8：第8、16、24...个元素（偶数行第4列）

扩展性说明 #

如果以后你的网格列数改变（比如改成3列），只需要重新计算周期（列数×2），再推导对应位置的公式即可，不用修改大量硬编码的序号，非常灵活。

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