如何将一些样式应用于 p 标签，除了 PDF 工具包中的其他 h 标签之外，在特定 h 标签之后

Question

我想将左边距：1em设置为h1后显示的p标签以及H2：2em之后，H3：3em之后，H4：4EM之后。

我该怎么办？

这是我的代码。

    h1~p {margin-left: 1em}
    h2~p {margin-left: 2em}
    h3~p {margin-left: 3em}

<h1>chapter1</h1>
<p>some paragraph</p>
<p>some paragraph</p>
<p>some paragraph</p>
<h2>section1-1</h2>
<p>some paragraph</p>
<p>some paragraph</p>
<p>some paragraph</p>
<h3>1-1-1</h3>
<p>some paragraph</p>
<p>some paragraph</p>
<p>some paragraph</p>
<h1>chapter2</h1>
<p>some paragraph</p>
<p>some paragraph</p>
<p>some paragraph</p>
<h2>section2-1</h2>
<p>some paragraph</p>
<p>some paragraph</p>
<p>some paragraph</p>
<h3>2-1-1</h3>
<p>some paragraph</p>
<p>some paragraph</p>
<p>some paragraph</p>

我想在 <h1>chapter2</h1> 和 <h2>section2-1</h2> 之间在 p 上设置 1em，但它是 3em。如何在不添加 html 标记的情况下实现这一点？

---

添加 2019/07/22

HTML数据从用Markdown编写的Web表单发送，并通过flask(python框架(markdown库转换为html。

然后我想用PDFKit输出由css标记的PDF文件。

Answer 1

如果您确定标头后有固定数量的p标签，则可以使用即时 CSS 选择器 + 。假设不会超过3个段落，你可以这样做

h1 + p {
  margin-left: 1em;
}
h1 + p + p {
  margin-left: 1em;
}
h1 + p + p + p {
  margin-left: 1em;
}

摆弄 https://jsfiddle.net/saksham_malhotra/afz6dsqu/

Answer 2

您可以使用相邻的同级组合器来实现此目的。

h1+p {margin-left: 1em}
h1+p+p{margin-left: 1em}
h1+p+p+p{margin-left: 1em}
h2+p{margin-left: 2em}
h2+p+p{margin-left: 2em}
h2+p+p+p{margin-left: 2em}
h3+p{margin-left: 3em}
h3+p+p{margin-left: 3em}
h3+p+p+p{margin-left: 3em}

但正如你所看到的，代码变得非常混乱和压倒性。因此，我建议您使用div 将不同的段落集括起来，并给它们一个类名并单独设置它们的样式。这将大大提高代码的可读性和效率。

Answer 3

试试这个，只需添加一个<div>容器。

h1~div {margin-left: 1em}
h2~div {margin-left: 2em}
h3~div {margin-left: 3em}
h1 + div{
  color:red;
}
h2 + div{
  color:blue;
}
h3 + div{
  color:green;
}

<h1>chapter1</h1>
<div>
  <p>some paragraph</p>
  <p>some paragraph</p>
  <p>some paragraph</p>
</div>
<h2>section1-1</h2>
<div>
  <p>some paragraph</p>
  <p>some paragraph</p>
  <p>some paragraph</p>
</div>
<h3>1-1-1</h3>
<div>
  <p>some paragraph</p>
  <p>some paragraph</p>
  <p>some paragraph</p>
</div>
<h1>chapter2</h1>
<div>
  <p>some paragraph</p>
  <p>some paragraph</p>
  <p>some paragraph</p>
</div>
<h2>section2-1</h2>
<div>
  <p>some paragraph</p>
  <p>some paragraph</p>
  <p>some paragraph</p>
</div>
<h3>2-1-1</h3>
<div>
  <p>some paragraph</p>
  <p>some paragraph</p>
  <p>some paragraph</p>
</div>

Answer 4

您可以尝试将类或 id 添加到所需的 h 标签中，然后使用像H1#ID P