如何仅显示HTML中重复类的首次出现并隐藏其余实例？

搞定这个需求其实不难，咱们可以用JavaScript来精准处理——毕竟每个重复的元素都在独立的<li>里，纯CSS不太好跨容器定位重复项。给你两种实用思路：

方案一：针对指定的重复类（post-4837、post-4836） #

如果你只需要处理这两个特定的类，用这段代码就够了：

// 定义需要处理的重复类名
const targetClasses = ['post-4837', 'post-4836'];

targetClasses.forEach(className => {
  // 获取所有带这个类的元素
  const elements = document.querySelectorAll(`.${className}`);
  // 从第二个实例开始隐藏（连同父级.product容器）
  for (let i = 1; i < elements.length; i++) {
    elements[i].closest('.product').style.display = 'none';
    // 若仅需隐藏div本身，替换为：elements[i].style.display = 'none';
  }
});

说明：这段代码会遍历你指定的类，找到每个类对应的所有元素，然后把从第二个开始的实例（连同它的父级<li class="product">）隐藏。如果不需要隐藏整个列表项，只隐藏目标div的话，去掉.closest('.product')即可。

方案二：通用处理所有post-前缀的重复类 #

如果以后可能出现其他post-xxx格式的重复类，用这个更灵活的通用方案：

// 用Set记录已经出现过的post类（自动去重）
const seenPostClasses = new Set();

// 找到所有包含post-前缀类的div元素
document.querySelectorAll('div[class*="post-"]').forEach(div => {
  // 提取当前div中的post-xxx类
  const postClass = [...div.classList].find(cls => cls.startsWith('post-'));
  
  if (postClass) {
    if (seenPostClasses.has(postClass)) {
      // 该类已出现过，隐藏对应的.product容器
      div.closest('.product').style.display = 'none';
    } else {
      // 首次出现，记录到Set中
      seenPostClasses.add(postClass);
    }
  }
});

说明：这段代码会自动识别所有带post-前缀的类，用Set来跟踪已经出现过的类，只要是重复的实例就会隐藏后面的项。完美适配未来新增的同类重复场景。

注意事项 #

如果你的页面是动态加载内容（比如滚动加载、AJAX异步加载），记得把这段代码放在内容加载完成后执行，或者用MutationObserver监听DOM变化，确保新加载的重复元素也能被处理。

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