使用时打印问题：目标伪类

Question

我正在尝试使用仅使用CSS的标签式导航。我正在使用：target伪类用于在标签之间切换：

<div class="tabbed">
  <div id="tab1">
     <a href="#tab1">...</a>
     ...
  </div>
  <div id="tab2">
     <a href="#tab2">...</a>
     ...
  </div>
</div>

问题是我正在尝试打印页面。它始终显示最后一个选项卡。这个问题在Firefox中存在但在chrome中是可以的。在CSS文件中，我使用以下内容来解决此问题;但它不起作用。

@media print {
  .tabbed > div:target > div {
    z-index:1;
  }
  .tabbed > div:not(:target) > div {
    z-index:0;
  }
}

请让我知道如何解决这个问题。

Answer 1

您是否考虑过仅使用display而不是z-index作为打印样式？

我希望这可以满足您的要求：

@media print {
  .tabbed > div:target > div {
    display: block;
  }
  .tabbed > div:not(:target) > div {
    display: none;
  }
}