删除用于打印的 JavaScript CSS 覆盖

Remove JavaScript CSS overrides for printing

本文关键字：CSS 覆盖 JavaScript 用于 打印 删除      更新时间：2023-09-26

我面临以下问题：我正在尝试改编WordPress主题的印刷版本。该主题包含一个jQuery图像幻灯片，该幻灯片是从某些包含的脚本生成的，我不应该更改该脚本。

在HTML中，幻灯片是一个ul，每个li包含一个图像。li 元素具有"精选"和"slide_number_n"类，其中 n 是幻灯片的编号（即 slide_number_1、slide_number_2 等）。

因此，幻灯片将如下所示：

<ul class="slideshow_container">
  <li class="featured slide_number_1" style="display:block"><img src="foo.jpg" /></li>
  <li class="featured slide_number_2" style="display:none"><img src="bar.jpg" /></li>
</ul>

如果我查看页面的打印版本（当然），它包含幻灯片中的所有图像，但我们的客户只想要显示的第一个显示器，所以我尝试更改它来做到这一点。但是，如果我在幻灯片中显示第一个图像后打开打印版本，则根本看不到任何图像，因为JS已覆盖了所有内联显示值。我无法撤消这些JS更改，甚至无法在打印中使用!important和li[style].css。

有没有办法撤消JS在打印.css所做的更改？

谢谢和问候，朱利安

>!important应该可以工作。

看我的例子：http://jsfiddle.net/CqAXu/

如果它不起作用，那么我们需要查看更多您的代码。

仅打印第一个：

<style media="print">
    #slideshow_container .feature {
        display: none!important;
    }
    #slideshow_container :first-child {
        display: list-item!important;
    }
</style>
<ul id="slideshow_container">
    <li class="feature" style="display: none">Print</li>
    <li class="feature" style="display: list-item">Noprint, Current</li>
    <li class="feature" style="display: none">Noprint</li>
    <li class="feature" style="display: none">Noprint</li>
    <li class="feature" style="display: none">Noprint</li>
</ul>
相关文章：