html - 将 CSS 应用于打印链接

Question

我有一些黑色文本的链接。根据用户在下拉列表中选择的内容，我应用以下 CSS 来更改匹配链接。如果用户然后选择打印他们正在查看的 View ，则那些相同的链接将以黑色文本打印出来。我怎样才能让 CSS 转移到打印 View ，以便用户看到与他们在屏幕上看到的颜色相同的打印颜色？

$this.find('a').css("color", "#bfbfbf");
$this.find('.fa-play').css("color", "#bfbfbf");
$this.find('.fa-check-circle').css("color", "#bfbfbf");

Answer 1

以下代码将影响处于打印模式时内部任何元素的 CSS:

@media print {
   span {
      color: black;
   }
}

在上面的例子中，任何 span 的颜色在打印模式下都是黑色的。

编辑:2017 年 10 月 28 日根据@TamirNahum 建议的评论，我已经弄明白了。以下是完整答案。

jQuery .addClass 会将“tailoredLink”类注入(inject)到与下拉选择相匹配的每个元素中。

$this.find('a').css("color", "#bfbfbf").addClass("tailoredLink");
$this.find('.fa-play').css("color", "#bfbfbf").addClass("tailoredLink");
$this.find('.fa-check-circle').css("color", "#bfbfbf").addClass("tailoredLink");

然后当用户选择打印页面时，下面的 CSS 将以灰色显示“定制链接”。

@media print {
   .tailoredLink{
      color: gray;
   }
}