点击class为c的元素时，仅为对应父级class为a的div添加类/ID

步骤1：编写JavaScript逻辑实现父级类的精准添加 #

给所有class为c的元素绑定点击事件，点击时先清除所有.a元素上的目标标记类，再通过closest()方法定位当前点击元素对应的最外层.a父元素，为其添加标记类（比如print-target）：

// 获取所有class为c的元素
const cElements = document.querySelectorAll('.c');

cElements.forEach(el => {
  el.addEventListener('click', function() {
    // 先移除所有.a元素上的print-target类，避免残留
    document.querySelectorAll('.a').forEach(aEl => {
      aEl.classList.remove('print-target');
    });
    // 找到当前点击元素的最近的.a父元素，添加标记类
    this.closest('.a').classList.add('print-target');
    // 触发打印（也可让用户手动触发）
    window.print();
  });
});

步骤2：编写打印样式表控制打印内容 #

通过CSS媒体查询@media print设置打印时的显示规则，只显示带有print-target类的.a元素，其他.a元素隐藏：

@media print {
  /* 默认隐藏所有.a元素 */
  .a {
    display: none !important;
  }
  /* 只显示标记为print-target的.a元素 */
  .a.print-target {
    display: block !important;
  }
  /* 可选：隐藏页面其他无关内容 */
  body > *:not(.a.print-target) {
    display: none !important;
  }
}

原理说明 #

• closest('.a')方法会从当前元素开始向上遍历DOM树，找到第一个匹配.a选择器的祖先元素，精准定位到点击的.c对应的父级.a，不会影响其他同级的.a元素。
• 每次点击前清除所有.a的标记类，确保不会出现多个目标元素被标记的情况，保证打印的唯一性。

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