如何为特定分组中除最后一个外的所有元素应用CSS样式？

纯CSS能否实现？ #

不行。因为CSS的结构伪类（比如:last-of-type、:last-child）只能基于DOM结构或元素类型判断“最后一个元素”，没法识别SearchHighlightGroup{x}这类带动态数字后缀的class属于同一分组。属性选择器能匹配class前缀，但没法关联“同前缀分组内的最后一个元素”这种逻辑，所以纯CSS做不到精准匹配需求。

SCSS的实现方式 #

SCSS可以通过循环生成对应每个分组的选择器，完美解决这个问题。示例代码如下：

// 假设分组数字x的范围是1到100，可根据实际情况调整上限
@for $i from 1 through 100 {
  // 选中每个分组内除最后一个外的所有元素
  .SearchHighlightGroup#{$i}:not(:last-of-type) {
    // 这里写你要应用的样式，比如：
    color: #ff4444;
    margin-right: 6px;
  }
}

这段代码会自动生成从.SearchHighlightGroup1到.SearchHighlightGroup100的所有选择器，给每个分组里的非最后一个元素加上样式。如果你的分组数字上限更大，只要修改循环的through值就行。

额外说明 #

如果同分组的span在DOM里是连续的子元素，也可以试试用:has选择器的纯CSS方案，但:has目前浏览器兼容性还没完全覆盖，而且一旦分组之间穿插了其他元素就会失效，所以不如SCSS循环靠谱：

// 仅当同分组span连续排列时可用，且需浏览器支持:has
[class^="SearchHighlightGroup"]:has(~ [class^="SearchHighlightGroup"]) {
  color: #ff4444;
}

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