Question

我正在尝试为我认为相当简单的html结构创建样式表，但我无法达到我想要的效果。

html的结构如下：

它主张章节（类：.chapter）。

每一章都以标题（类：.chapter-title）开头。

一章由项目（类：.item）组成。

项目由段落（类：.paragraph）。

组成

打印文档时，我希望.chapter-title和第一个 .item之间没有分页符，我希望.item内没有分页符。 .item之间的分页符确定。

这就是我的尝试：

<!DOCTYPE html>
<html>
<head><!--{-->

  <title>Chapter, items and paragraphs</title>

  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

   <!--{--><style type='text/css'>

     body {
       font-family:Garamond;
     }

     .chapter {
        page-break-inside:avoid;
     }

     .chapter-title + .item {
        page-break-before:avoid;
     }

     .chapter-title {
        font-size: 30px;
        page-break-after:avoid;
     }

     .item {
        border: 1px dashed #ccc;
        page-break-inside:avoid;
     }

     .paragraph {
        height:5cm;
        border: 1px solid #7cf;
        margin:0.1cm;
     }

   </style><!--}-->

</head><!--}-->
<body><!--{-->

<div class='chapter'>
      <div class='chapter-title'>Chapter 1</div>

      <div class='item'>
        <div class='paragraph'>1 / 1 / Para 1</div>
      </div>

      <div class='item'>
        <div class='paragraph'>1 / 2 / Para 1</div>
        <div class='paragraph'>1 / 2 / Para 2</div>
      </div>

</div>

<div class='chapter'>
      <div class='chapter-title'>Chapter 2</div>

      <div class='item'>
        <div class='paragraph'>2 / 1 / Para 1</div>
        <div class='paragraph'>2 / 1 / Para 2</div>
      </div>

      <div class='item'>
        <div class='paragraph'>2 / 2 / Para 1</div>
      </div>

</div>

<div class='chapter'>
      <div class='chapter-title'>Chapter 3</div>

      <div class='item'>
        <div class='paragraph'>3 / 1 / Para 1</div>
        <div class='paragraph'>3 / 1 / Para 2</div>
      </div>

      <div class='item'>
        <div class='paragraph'>3 / 2 / Para 1</div>
      </div>

      <div class='item'>
        <div class='paragraph'>3 / 3 / Para 1</div>
        <div class='paragraph'>3 / 3 / Para 2</div>
        <div class='paragraph'>3 / 3 / Para 3</div>
      </div>

      <div class='item'>
        <div class='paragraph'>3 / 4 / Para 1</div>
        <div class='paragraph'>3 / 4 / Para 2</div>
      </div>

</div>


</body><!--}-->
</html>

如果打印（镶边，页面尺寸为A4），我在第3章和第一个元素之间有分页符。我尝试了上面的一些变化，但这是我最接近我需要的。那么，有没有一个样式表来完成我想要的东西？

请注意，height的css .paragraph属性仅用于人为地“炸毁”文档的大小。在“真实”文档中，有更多文本，使得.paragraphs具有不同的高度。

编辑错误的元素重命名为项目。

Answer 1

尝试将:first-child添加到您的CSS这里是一个很棒的CSS网站，它在过去帮助了我很多。

http://css-tricks.com/almanac/selectors/f/first-child/

无法使用css按需分页

1 个答案: