@page ：首先在 css 中不工作

Question

使用打印按钮，我正在打印 HTML 页面，其中包含一些具有 @media print 规则的页眉和页脚。

我希望首页的页眉不同而其他页的页眉相同。为此，我正在尝试 @page :first 规则。

body,
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Raleway", sans-serif
}

body,
html {
  height: 100%;
  line-height: 1.8;
}

@media screen {
  header.onlyprint,
  header.onlyprintf,
  footer.onlyprint {
    display: none;
    /* Hide from screen */
  }
}

.p {
  display: none;
}

@media print {
  #myHeader {
    font-size: 30px;
  }
  .p {
    display: initial;
  }
  .np {
    display: none;
  }
  a[href]:after {
    display: none;
  }
  header.onlyprint {
    position: fixed;
    /* Display only on print page (each) */
    top: 0;
    /* Because it's header */
    text-align: center;
    width: 100%;
  }
  footer.onlyprint {
    position: fixed;
    bottom: 0;
    /* Because it's footer */
    text-align: center;
    width: 100%
  }
  @page :first {
    header.onlyprint {
      display: none;
    }
    header.onlyprintf {
      position: relative;
      /* Display only on print page (each) */
      top: 0;
      /* Because it's header */
      text-align: center;
      width: 100%;
    }
  }
}

<body>
  <button class="btn btn-large btn-success np" onClick="window.print()" style="position: fixed; top: 75px; left: 50%;">Print</button>
  <header class="onlyprint">Header</header>
  <footer class="onlyprint">Footer</footer>
  <header class="onlyprintf">First Page Header</header>
  Some Text Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br />Some Text
  Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br />Some
  Text Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br
  />Some Text Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br />Some Text
  Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br />Some
  Text Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br
  />Some Text Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br />Some Text
  Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br />Some Text Here<br />

Answer 1

来自MDN documentation：

Note: You can't change all CSS properties with this pseudo-class. You can only change the margins, orphans, widows, and page breaks of the document. Furthermore, you may only use absolute-length units when defining the margins. All other properties will be ignored.

我不知道有什么方法可以根据特定元素出现的页面更改其呈现。

这可能是因为能够更改它是否在首页上。

即如果你给一个元素margin-top: 50cm如果它在第一页，那么它已经不在第一页了，所以不再应用margin-top: 50cm，也就是说它是在第一页所以 margin-top: 50cm 确实应用并永远循环。

CSS 试图使这种逻辑错误无法表达。

@page ：首先在 css 中不工作

@page :first not working in css

html

css

media