为什么CSS @media print 打印规则对部分div不生效？

异常现象的根源是CSS选择器优先级规则与jQuery动画的内联样式写入逻辑存在冲突，具体逻辑链路如下：

• jQuery的fadeIn()/fadeOut()动画的实现逻辑，是直接给目标元素写入行内style属性控制显隐状态。当你从#div1页面点击切换到#div2页面时，#div2会被写入style="display: block;"的内联样式，#div1会被写入style="display: none;"的内联样式。
• 你在@media print块中编写的#div2 {display: none}属于基于id选择器的内部样式，权重值为100；而元素自身的内联样式权重值为1000，优先级远高于id选择器规则。因此在打印模式下，这条专门用来隐藏#div2的规则，根本无法覆盖之前jQuery写入的内联block样式，#div2会保持原本的显示状态。
• 这个场景下#div1的内联样式本身就是display:none，所以哪怕媒体查询的隐藏规则不生效，它也不会在打印预览里出现；而#div3没有被JS写入任何内联样式，媒体查询里的display:block规则可以正常生效，最终就出现了打印预览中#div2和#div3同时显示的异常现象。

根据改动量从小到大，可选择以下任意一种方案实现预期的打印效果：

• 方案1（改动最小，适配现有代码）：在打印媒体查询中提高规则优先级，强制覆盖内联样式。给原有@media print块里的所有规则加上!important标记——被!important声明的样式优先级高于普通内联样式，可以强制指定打印模式下的元素显隐状态，不受之前JS写入的内联样式干扰。修改后的媒体查询代码如下：

@media print {
  #div1 {display: none !important;}
  #div2 {display: none !important;}
  #div3 {display: block !important;}
}

• 方案2（扩展性更强，适合多元素场景）：通过临时类标记控制打印显隐。修改#btn3的点击事件逻辑，在调用window.print()之前，给所有不需要在打印中显示的元素加上统一的打印隐藏类，打印流程结束后再移除临时标记，恢复原页面状态：

/* 新增通用打印隐藏类 */
.print-hidden {
  display: none !important;
}

// 修改原有btn3的点击逻辑
$("#btn3").on("click", function() {
  // 打印前给非打印元素加隐藏类
  $("#div1, #div2").addClass("print-hidden");
  // 延迟触发打印，等待样式渲染完成
  setTimeout(() => {
    window.print();
    // 打印结束后移除临时类，恢复原页面显隐状态
    $("#div1, #div2").removeClass("print-hidden");
  }, 0);
});

• 方案3（从根源避免冲突）：替换显隐控制逻辑，避免直接写入内联样式。将原有的jQuery fade动画直接操作display的写法，替换为通过CSS类控制显隐状态的逻辑，所有元素的显隐规则都由CSS类托管，从根源上避免内联样式覆盖媒体查询规则的问题。

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