0

我想将 margin-left:1em 设置为在 h1 之后以及 h2:2em 之后、h3:3em 之后、h4:4em 之后显示的 p 标签。

我能怎么做？

这是我的代码。

    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>

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

添加 2019/07/22

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

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

4

4 回答 4

0

您可以使用相邻的兄弟组合器来实现这一点。

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 来包含不同的段落集，并给它们一个类名并分别设置它们的样式。这将大大提高代码的可读性和效率。

于 2019-07-21T13:59:16.110 回答
0

如果您确定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/上小提琴

于 2019-07-21T13:56:37.373 回答
-1

试试这个，只需添加一个<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>

于 2019-07-21T13:43:06.683 回答
-1

您可以尝试将类或 id 添加到所需的 h-tag 中，然后使用 h1#id p 之类的选择器

于 2019-07-21T15:23:56.030 回答