如何针对分页媒体的@page边距at规则实现内容本地化？

嘿，这个问题我之前踩过坑！你原来的写法没效果，核心问题是CSS的@page是顶级规则，根本不能嵌套在html:lang()这类元素选择器里面——浏览器会直接判定这种嵌套是无效语法，直接忽略，所以页码才啥都不显示。

给你个亲测有效的解决方案，用CSS自定义属性（也就是变量）来实现，这也是现在最灵活的方式：

// 先根据不同语言定义对应的文本变量
html:lang(en) {
  --page-label: 'Page ';
  --of-label: ' of ';
}

html:lang(nb) {
  --page-label: 'Side ';
  --of-label: ' av ';
}

// 然后在@page规则里直接用这些变量
@page {
  @bottom-right {
    content: var(--page-label) counter(page) var(--of-label) counter(pages);
  }
}

原理很简单：CSS变量会从根元素html继承到分页媒体的页面上下文里，@page规则能正常读取这些变量值。只要你给html标签正确设置了lang属性（比如<html lang="en">或者<html lang="nb">），不同语言下就会自动加载对应的页码文本了。

另外再提醒你一下，一定要确认html标签的lang属性是正确设置的，不然:lang()选择器根本不会生效哦！

内容来源于stack exchange