为什么有些打印CSS规则不起作用？

Question

我的打印CSS中有这个：

.foo
{
    display: none;
}

.bar
{
    display: none;
}

隐藏了所有class="foo"元素，但所有class="bar"元素仍然可见。可能是什么原因造成的？

Answer 1

CSS specificity可能会推翻您的打印CSS规则。解决此问题的最简单方法是在您的规则中添加!important。虽然通常应该避免这种情况，但在打印CSS中使用它是很好的。

.bar
{
    display: none !important;
}

另一种方法是确保您的打印CSS规则在特异性计算中排在最前面。完成此操作的确切方法完全取决于您的常规CSS规则。