如何通过CSS/SCSS隐藏同前缀重复类元素，仅保留首个实例？

这个问题确实挺棘手的——纯CSS因为选择器的局限性，没法直接实现你要的动态分组隐藏效果，不过我们可以用JS/jQuery来完美解决，先给你理清楚问题所在，再给出可行方案：

为什么你原来的CSS方案不生效？ #

你写的CSS：

[class*="prefix-"]{ display: none; } 
[class*="prefix-"]:first-child{ display:block; }

问题出在:first-child选择器——它只会匹配父元素下的第一个子元素，而不是每个不同前缀类的第一个实例。比如你的示例里，只有第一个prefix-one会被显示，其他所有带prefix-前缀的元素（包括prefix-two、prefix-three这些唯一的元素）都会被display: none隐藏，这显然不是你想要的结果。

纯CSS/SCSS的局限性 #

目前CSS没有原生的选择器能力，能够“根据类名前缀分组，然后隐藏每组的非首个元素”。因为CSS选择器无法追踪DOM中已经出现过的类名前缀，只能基于固定的类名或DOM结构来选择元素。由于你的前缀后缀是动态生成的，没法硬编码所有可能的类名，所以纯CSS/SCSS确实没办法实现这个需求。

可行的解决方案：JS/jQuery #

既然纯CSS走不通，我们可以用JS来遍历元素，记录已经出现过的前缀类，然后隐藏重复的实例。下面是两种实现方式：

方案1：jQuery实现 #

$(document).ready(function() {
  // 用Set存储已经处理过的前缀类，避免重复
  const seenPrefixes = new Set();
  
  // 遍历所有包含prefix-前缀的元素
  $('[class*="prefix-"]').each(function() {
    const $el = $(this);
    // 拆分元素的所有类名
    const classes = $el.attr('class').split(' ');
    // 筛选出以prefix-开头的类名
    const targetClass = classes.find(cls => cls.startsWith('prefix-'));
    
    if (targetClass) {
      if (seenPrefixes.has(targetClass)) {
        // 该前缀类已出现过，隐藏当前元素
        $el.hide();
      } else {
        // 首次出现，记录该前缀类
        seenPrefixes.add(targetClass);
      }
    }
  });
});

方案2：原生JavaScript实现（无需jQuery） #

如果你不想依赖jQuery，原生JS也能实现同样的效果：

document.addEventListener('DOMContentLoaded', function() {
  const seenPrefixes = new Set();
  // 获取所有带prefix-前缀的元素
  const elements = document.querySelectorAll('[class*="prefix-"]');
  
  elements.forEach(element => {
    const classes = element.className.split(' ');
    const targetClass = classes.find(cls => cls.startsWith('prefix-'));
    
    if (targetClass) {
      if (seenPrefixes.has(targetClass)) {
        element.style.display = 'none';
      } else {
        seenPrefixes.add(targetClass);
      }
    }
  });
});

兼容性说明 #

如果需要兼容不支持startsWith的旧浏览器，可以把cls.startsWith('prefix-')替换成cls.indexOf('prefix-') === 0，效果是一样的。

效果验证 #

用你给出的示例HTML测试，这两个方案都会隐藏重复的prefix-one元素（C和F），保留每个前缀类的第一个实例，最终呈现ABDEG的效果，完全符合你的需求。

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