CSS nth-child用法疑问：nth-child(1n)具体会选中哪些元素？

你对nth-child(1n)的猜测是错误的，我们结合nth-child的完整计算规则逐个梳理即可理清：

核心基础规则 #

:nth-child(an + b) 选择器的计算逻辑你已经掌握了大半，只漏了两个关键细节：

1. 所有计算结果≤0的数值会被直接忽略，不会参与匹配
2. 子元素的序号是从1开始计数，不存在序号为0的元素

你提到的几个写法的实际匹配逻辑 #

• nth-child(1n)
  这里省略了偏移值b，默认是0，完整写法是nth-child(1n + 0)，代入n的取值计算：
  n=0 → 1×0 +0 =0 → 忽略
  n=1 →1×1 +0=1 → 匹配第1个元素
  n=2 →1×2 +0=2 →匹配第2个元素
  n=3 →3 →匹配第3个元素
  以此类推，所有正整数序号都会被覆盖，所以nth-child(1n)等价于选中所有匹配选择器的子元素，和:nth-child(n)的效果完全一致，和你猜测的nth-child(0)没有任何等价关系。
• nth-child(0)
  固定值为0，不符合子元素从1开始的序号规则，不会选中任何元素。
• nth-child(2n)
  完整写法是nth-child(2n +0)，代入计算：
  n=0→0→忽略
  n=1→2×1+0=2→匹配第2个元素
  n=2→4→匹配第4个元素
  以此类推，会选中所有偶数序号的元素，和:nth-child(even)效果完全一致。

额外补充常见简写用法 #

• :nth-child(2n+1) 等价于:nth-child(odd)，匹配所有奇数序号的元素
• :nth-child(-n+3) 匹配前3个元素
• :nth-child(n+4) 匹配从第4个开始的所有元素

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