能否在CSS中一次性选择多个nth-of-type(x)对应的元素？

嘿，这个问题问得特别接地气——我当初第一次碰到这种要选一堆零散序号元素的需求时，也琢磨过能不能这么写！

直接给你结论：很遗憾，CSS的:nth-of-type()伪类并不支持直接传入逗号分隔的序号列表，像你设想的nth-of-type(1,2,5,6,7,8,9)这种写法，是不符合CSS选择器规范的，浏览器根本无法识别。

为什么不行？ #

:nth-of-type()的参数规则是CSS规范明确规定的，只能是两种形式：

• 关键字：odd（匹配奇数位元素）或even（匹配偶数位元素）
• An+B形式的表达式：其中A和B都是整数，n会从0开始递增，用来匹配有规律的元素序列（比如3n+1匹配第1、4、7...位元素）

这个设计的初衷是让选择器聚焦于有规律的元素序列，而不是零散、无规律的序号集合。

那该怎么解决你的需求？ #

既然每次需要选择的序号都不一样，没法用整除类的表达式，给你几个实用的替代方案：

1. 最标准的CSS写法：多个:nth-of-type()并列

就是你现在正在用的方式，把每个目标序号单独写一个选择器，用逗号分隔。虽然看起来代码长，但兼容性拉满，所有支持CSS3的浏览器都能识别：

#filtersBarInner.closed div[class^="pure-u"]:nth-of-type(1),
#filtersBarInner.closed div[class^="pure-u"]:nth-of-type(2),
#filtersBarInner.closed div[class^="pure-u"]:nth-of-type(3),
#filtersBarInner.closed div[class^="pure-u"]:nth-of-type(5),
#filtersBarInner.closed div[class^="pure-u"]:nth-of-type(6),
#filtersBarInner.closed div[class^="pure-u"]:nth-of-type(7),
#filtersBarInner.closed div[class^="pure-u"]:nth-of-type(8),
#filtersBarInner.closed div[class^="pure-u"]:nth-of-type(9) {
  /* 你的样式代码 */
}

2. 用CSS预处理器简化代码

如果你项目里用了Sass、Less这类预处理器，可以写个小工具函数或者混入，自动生成这些选择器，不用手动重复写：
比如Sass的实现示例：

@function generate-nth-selectors($parent, $base-selector, $index-list) {
  $selectors: ();
  @each $index in $index-list {
    $selectors: append($selectors, #{$parent} #{$base-selector}:nth-of-type(#{$index}), comma);
  }
  @return $selectors;
}

// 使用的时候直接传序号列表就行
#{generate-nth-selectors('#filtersBarInner.closed', 'div[class^="pure-u"]', (1,2,3,5,6,7,8,9))} {
  /* 你的样式代码 */
}

编译后就会自动生成你需要的完整选择器列表，后续维护序号只需要修改列表就行，非常方便。

3. JavaScript辅助（如果允许的话）

如果项目里可以用JS，你可以先给目标元素统一加个类名，再用类选择器写样式，这样CSS会简洁很多：

// 定义需要选择的序号列表
const targetIndices = [1,2,3,5,6,7,8,9];
// 获取父容器
const parentContainer = document.querySelector('#filtersBarInner.closed');

// 遍历序号，给对应元素加类
targetIndices.forEach(index => {
  const targetElement = parentContainer.querySelector(`div[class^="pure-u"]:nth-of-type(${index})`);
  if (targetElement) {
    targetElement.classList.add('target-filter-item');
  }
});

然后CSS里只需要写：

#filtersBarInner.closed .target-filter-item {
  /* 你的样式代码 */
}

总结 #

虽然直接传入序号列表的想法非常实用，但目前CSS规范确实没有支持这个特性。不过上面这几个方案都能很好地解决你的需求，你可以根据自己项目的技术栈选最适合的~

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