避免标题和第一个列表项

Question

我有一个HTML文档，我想确保在打印时，分页后不会立即显示分页符。

在理想的世界中，这就像设置.heading {page-break-after: avoid;}一样简单，但大多数浏览器不支持page-break-after: avoid（或page-break-before: avoid），只支持page-break-inside: avoid。

当p之类的独立元素跟随我的标题时，我可以将标题和段落包装在<div class="nobreak">中，并避免.nobreak元素内的分页符。

但有时候，标题后面会列出一长串：

<h1>A list of things</h1>
<ol>
  <li>This is the first thing.</li>
  <li>This is the next thing.</li>
  ...
  <li>Many things later, we reach the end.</li>
</ol>

我可以在h1中包含ol和div.nobreak 两者，但这太严格了：它可以防止在任何时候发生分页在列表中，当我真正关心的是在第一个li之前阻止休息时。

由于显而易见的原因（存在ol标记），我无法仅在周围元素中包裹h1和第一个li。

关于如何在这里达到预期效果的任何想法？

Answer 1

<style>
 h1 { margin-bottom: 0; padding-bottom:0;}
 ol, li:first-child { margin-top: 0; padding-top: 0; }
</style>

使用li:first-child子类仅设置列表中第一个元素的样式。

确保包装元素之间没有其他边距或填充。