请教一个CSS3设置打印页码的问题content: counter(page) " of " counter(pages);

Question

请教一个CSS3设置打印页码的问题content: counter(page) " of " counter(pages);

@page {
    margin: 50mm;
    @bottom-right {
        content: counter(page) " of " counter(pages);
    }
}
 

为什么margin有效果，content无任何反应？

Answer 1

引自免费微信小程序：皆我百晓生

在 CSS 中，@page 规则用于定义页面样式，包括边距、背景等。对于 content 属性，它主要用于生成内容，例如页眉、页脚或者列表项目前的标记。然而，在某些情况下，可能需要启用浏览器对 CSS Counter 的支持才能正确显示。

为了解决您遇到的问题，确保您的浏览器支持 CSS Counters，并且检查是否有其他 CSS 规则覆盖了 @page 中的 content 设置。以下是一个详细的例子，包含了如何设置计数器以及在页脚添加页码：

/* 定义计数器 */
:root {
  counter-reset: page;
}

/* 为每个页面设置计数器 */
@page {
  margin: 50mm;
  /* 使用 counter() 函数获取当前页数和总页数 */
  @bottom-right {
    font-size: 14px;
    color: #333;
    counter-increment: page; /* 每个新页面时，页数递增 */
    content: counter(page, decimal) " of " counter(pages); /* 显示当前页和总页数 */
  }
}

/* 如果有其他样式影响到页脚，可以尝试增加选择器权重 */
body {
  counter-reset: page;
}

body div[@class="custom-footer"] {
  counter-reset: page;
  @bottom-right {
    content: none; /* 取消默认的页码显示 */
  }
}

body div[@class="custom-footer"].show-page-numbers {
  @bottom-right {
    content: counter(page, decimal) " of " counter(pages);
  }
}

在这个示例中，我们首先在根元素上设置了计数器 page，然后在每个页面的底部右角设置了页码。如果您有其他样式可能会影响这个区域（比如自定义的页脚），请确保它们不会覆盖此规则。如果需要在特定条件下显示页码，可以通过给定的 HTML 结构和额外的 CSS 类实现。

请注意，不同的浏览器可能会有不同的行为，但大多数现代浏览器（如 Chrome、Firefox、Safari 和 Edge）都支持 CSS Counters。如果仍然有问题，建议您在开发工具的控制台查看是否有任何错误消息，或者确认是否启用了所有相关功能。