使用 :target 伪类时的打印问题

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;
  }
}