nth-child格式疑问：CSS代码优化写法及结尾选择失效问题

可以利用CSS的:is()伪类结合:nth-child()的范围选择逻辑，把连续的子元素范围合并，大幅简化代码：

.colHeaders div:is(
  :nth-child(n+2):nth-child(-n+4),
  :nth-child(n+11):nth-child(-n+12),
  :nth-child(n+14):nth-child(-n+16)
) {
  background: lightgrey;
}

其中的逻辑是：

• n+2表示从第2个元素开始（n从0递增，0+2=2、1+2=3，以此类推）
• -n+4表示选中第4个及之前的元素（n=0时为4、n=1时为3，n=2时为2，超出范围则不匹配）
• 两者结合就能精准选中第2到第4个元素，其余范围的逻辑完全一致。

你尝试的几种写法都是错误的，因为:nth-child()本身不支持直接传入逗号分隔的数字或2-4这类简化范围语法，必须通过复合选择器或:is()来组合条件。

至于为什么能“跳过开头”却不能直接“跳过结尾”，核心是:nth-child()的计数逻辑：

• 它从父元素的第一个子元素开始正向计数，参数an+b里的n从0开始递增。
• 跳过开头用n+a（比如n+2），是设定一个“起始点”，选中第a个及之后的所有子元素。
• 要限制“结束点”（跳过结尾后的元素），必须用-n+b（比如-n+16），它会选中第b个及之前的所有子元素。

如果只想选中中间某一段范围，必须同时用n+a（起始）和-n+b（结束）两个条件组合，才能精准框住目标区间——只写起始条件的话，会一直选中到父元素的最后一个子元素，无法自动停止。

比如你想选14到16号元素，单独写n+14会选中14、15、16、17...（如果父元素有更多子元素），但加上-n+16后，当n=3时n+14=17，而-n+16=13，17>13不满足条件，就只会选中14、15、16三个元素。

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