html - 如何停止打印媒体的 Bootstrap 表背景颜色设置覆盖我的类(class)设置

Question

我使用 twitter-bootstrap 作为我的 HTML 的主要样式。

我有一个生成的表格(从 ember 应用程序生成)，表格的每个单元格都设置了背景颜色以指示特定状态。使用类选择器设置颜色。

这非常适合屏幕，但在打印时我只会得到白色背景色，因为 bootstrap 定义了以下内容:

@media print {
  .table td, .table th {
    background-color: #fff !important;
  }
}

我的 html 看起来像这样:

<table class-"table table-condensed>
   <tr>
     <td class="bg-color1>Content</td>
     <td class="bg-color2>Content</td>
   </tr>
</table>

我的 CSS 是这样的:

.bg-color1 {
  background-color: #ababab;
}
.bg-color2 {
  background-color: #bababa;
}
@media print {
 .bg-color1 {
   background-color: #ababab;
 }
 .bg-color2 {
   background-color: #bababa;
 }
}

如果我在打印媒体类描述中使用 !important 仍然不起作用。此外，如果我将以下内容添加到“撤消” Bootstrap 中的 td th 设置，它不起作用，因为这优先于我的类设置，所以我在打印时仍然没有得到颜色

@media print {
 .table td, .table th {
   background-color: initial !important;
  }
}

使用 Bootstrap 使用类选择器进行打印时，似乎无法获得彩色背景。有没有人对此有解决方案。

Answer 1

哦，是的，刚刚注意到一件事......CSS 具有这种令人头疼的偏好设置，您的选择树越大，它的优先级就越高。参见 CSS specifity获取更多信息。

例如，table > td 优先于 td

在 Bootstrap 的 CSS 中，td 被选择为 .table td，但您的选择器只是 .bg-color1 或 .bg-color2

有两种方法可以解决这个问题。

1. 从 Bootstrap 的 CSS 中删除 !important 并在您的 CSS 中保留 !important
2. 增加选择器的长度，比如 .table .bg-color1

我没有证据证明这一点，但这是我注意到的。