【发布时间】：2020-01-02 17:44:05
【问题描述】：
我尝试了以下代码。使用 CSS 中的打印媒体更新打印页面内页眉和页脚的代码的目的
body {counter-reset: chapter;}
div.chapter {counter-increment: chapter;}
@page {
margin: 10%;
@top-center { content: "Chapter" counter(chapter) }
}<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="./style.css"/ media="print">
</head>
<body>
<header></header>
<div id="pageHeader">
<p>This is the Header shown on first page.</p>
</div>
<div id="pageFooter">
<p>This is the footer shown on last page.</p>
</div>
<section class="page">
<h1>Introduction</h1>
<p>The margins can be set as displayed in the examples above, or can be set for each side individually, as shown in the code snippet below, where the top and bottom margins are set to 2cm, and the left and right margins are set to 3cm:
The margins can be set as displayed in the examples above, or can be set for each side individually, as shown in the code snippet below, where the top and bottom margins are set to 2cm, and the left and right margins are set to 3cm:
The margins can be set as displayed in the examples above, or can be set for each side individually, as shown in the code snippet below, where the top and bottom margins are set to 2cm, and the left and right margins are set to 3cm:
The margins can be set as displayed in the examples above, or can be set for each side individually, as shown in the code snippet below, where the top and bottom margins are set to 2cm, and the left and right margins are set to 3cm:</p>
<p>
The margins can be set as displayed in the examples above, or can be set for each side individually, as shown in the code snippet below, where the top and bottom margins are set to 2cm, and the left and right margins are set to 3cm:
The margins can be set as displayed in the examples above, or can be set for each side individually, as shown in the code snippet below, where the top and bottom margins are set to 2cm, and the left and right margins are set to 3cm:
The margins can be set as displayed in the examples above, or can be set for each side individually, as shown in the code snippet below, where the top and bottom margins are set to 2cm, and the left and right margins are set to 3cm:
The margins can be set as displayed in the examples above, or can be set for each side individually, as shown in the code snippet below, where the top and bottom margins are set to 2cm, and the left and right margins are set to 3cm:
</p>
<p>The margins can be set as displayed in the examples above, or can be set for each side individually, as shown in the code snippet below, where the top and bottom margins are set to 2cm, and the left and right margins are set to 3cm:
The margins can be set as displayed in the examples above, or can be set for each side individually, as shown in the code snippet below, where the top and bottom margins are set to 2cm, and the left and right margins are set to 3cm:
The margins can be set as displayed in the examples above, or can be set for each side individually, as shown in the code snippet below, where the top and bottom margins are set to 2cm, and the left and right margins are set to 3cm:
The margins can be set as displayed in the examples above, or can be set for each side individually, as shown in the code snippet below, where the top and bottom margins are set to 2cm, and the left and right margins are set to 3cm:</p>
</section>
</body>
</html>以下网址是我尝试过代码的地方 https://www.quackit.com/css/at-rules/css_bottom-center_at-rule.cfm https://www.w3.org/TR/css-page-3/#cascading-and-page-context
但是当我打印它时，它会应用 @page 规则的边距，但不会从其他定义规则更新页眉和页脚中的内容。 我附上了下面的图片，它显示了用于更改特定代码区域的规则
但是当我打印除@page（设置边距正确）之外的其他@rules 时不起作用
我想使用下面的 css @rule 更新打印页面中的突出显示区域
- @bottom-center
- @bottom-left-corner
- @右下角
【问题讨论】：
-
嘿，你解决了这个问题吗，我遇到过这样的要求，任何解决方案都非常感谢stackoverflow.com/users/7690520/artier
-
@Md.Nawaz 检查我的答案