css-paged-media - 将@page 与其他选择器结合使用

Question

我有一个包含应该有条件地出现的元素的 CSS。

对于大多数元素，这很容易：我有一个附加到 body 元素的属性，我可以在 CSS 中使用它：

body[data-var-draft=Draft] .heading1 {}

不过，这似乎不适用于 @page 元素：

body[data-var-draft=Draft] @page {}

导致 Antennahouse Formatter (6.6) 中出现错误消息。

我已经看到@page 规则的更多限制：

@page titlepagesection, @page tocsection, @page chaptersection {}

似乎也不起作用。

是否/应该可以将@page 与其他选择器结合使用？

Answer 1

@page规则由属性page值选择。要在特定上下文中选择特定命名页面，请page在规则中为该上下文设置属性值：

@page draft {
  background-image: url('draft-watermark.svg');
}

body[data-var-draft=Draft] {
  page: draft;
}

在https://www.antennahouse.com/css/的“分页媒体 CSS 简介”的第 3 章页面布局中有一个图解示例。