Question

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

我希望第一页的标题不同，其他页面标题相同。为此，我正在尝试@page :first规则。

＆＃13;

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

＆＃13;

<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 />

＆＃13;

Answer 1

来自MDN documentation：

注意：您无法使用此伪类更改所有CSS属性。您只能更改文档的边距，孤立，窗口和分页符。此外，在定义边距时，您只能使用绝对长度单位。所有其他属性都将被忽略。

我不知道有任何方法可以根据显示的页面更改特定元素的呈现。

这可能是因为如果它在第一页上，就能够改变。

即。如果您在第一页上提供了元素margin-top: 50cm，则该元素不再位于第一页上，因此不再应用margin-top: 50cm，这意味着在第一页上，margin-top: 50cm 应用并永久循环。

CSS试图让它无法表达那种逻辑错误。

@page：首先不在css中工作

1 个答案: