css - 如何从加载的网页中找到 CSS 模式并将其删除

Question

有一个 Amazon.com 页面不会在打印预览中呈现并显示为空白（它是Online Return Center\Your Return Summary 页面）。通过在本地保存的页面副本上进行大量试验和错误，我在一些错误的链接样式表中找到了罪魁祸首，该样式表在打印预览期间隐藏了所有内容......

@media print {
    body *, header {
        visibility: hidden;
    }
}

但是，回到原始网站，我正在努力从开发人员工具的实时页面中找到该来源。我在哪里可以从开发人员工具中查找这种结构并覆盖它，以便打印预览按预期呈现？

---

我试过的

到目前为止，Elements我正在搜索所有link rel="stylesheet"点击并手动跟踪所有hrefs到 css 并搜索关键字print。这最终起作用了，但是当我删除链接标签并返回页面进行打印时，我仍然得到相同的空白页面。也许这是一个服务器端的错误？

这是该head部分中的链接

<link rel="stylesheet" href="https://images-na.ssl-images-amazon.com/images/I/01WIasbg6mL._RC|014yivy0BxL.css_.css?AUIClients/PREXWebAppBuzzAssets-confirmationPage">

我可以在本地做些什么来删除这个糟糕的 CSS？

这是我正在谈论的预览

标签： cssdeveloper-tools

Answer 1

从对作者答案的评论中：

对于单个删除和打印，您可以尝试通过反转链接答案中的步骤来强制 Chrome 使用screen样式，即使它通常会使用。print

---

如果使用 Chrome 打开开发者工具，点击右上角的 3 个垂直点，转到More tools-->Rendering

然后找到Emulate CSS media type列表框并选择Screen。触发打印并查看打印预览并检查内容是否按预期呈现并继续打印。