css - 使用 :target pseudo-class 时出现打印问题

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