如何仅当页面存在指定id的div时才应用对应的@media print规则

方案1：CSS原生实现（推荐，现代浏览器兼容） #

直接使用CSS的:has()伪类做存在性判断即可，无需引入额外脚本：

@media print {
  /* 仅当页面存在#mytargetdiv时才会触发以下规则 */
  body:has(#mytargetdiv) .inside-article > :not(#mytargetdiv), 
  body:has(#mytargetdiv) .inside-navigation, 
  body:has(#mytargetdiv) .site-footer {
    display: none;
  }
}

该方案兼容Chrome 105+、Firefox 121+、Safari 15.4+，覆盖全球90%以上的活跃浏览器用户，常规业务场景足够使用。

方案2：JS辅助实现（全浏览器兼容） #

如果需要兼容不支持:has()的旧版浏览器，可以通过JS检测元素存在性，给根节点加标记类的方式实现：

1. 页面加载时执行检测逻辑：

document.addEventListener('DOMContentLoaded', () => {
  // 存在目标元素时给body添加标记类
  if (document.querySelector('#mytargetdiv')) {
    document.body.classList.add('has-target-div');
  }
});

2. 调整CSS规则，基于标记类限定生效范围：

@media print {
  .has-target-div .inside-article > :not(#mytargetdiv), 
  .has-target-div .inside-navigation, 
  .has-target-div .site-footer {
    display: none;
  }
}

该方案兼容所有支持JS的浏览器，适配性更强。

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