Question

我计划使用移位金额来表示由不同级别内容组成的帖子的结构。内容越深，内容转移得越多。例如，

<h1>Part1</h1>
This is a post about Universe.

<h2>Part1.1</h2>
First we talk about the Galaxy.

Facts about the Galaxy.
Now you know the Galaxy.

<h3>Part1.1.1</h3>
More details about the Galaxy.

<h2>Part1.2</h2>
Facts aoubt another galaxy.

<h1>Part2</h1>

我希望This is a post about Universe.之前没有填充，<h2>Part....you know the Galaxy填充100px，<h3>....details about the Galaxy.填充200px。我认为css / sass可以做到这一点，但我不知道如何选择相应的元素。

Answer 1

以下是一个应用于您的标记的示例：

＆＃13;

h2 {
  padding: 100px 0;
}
h3 {
  padding: 200px 0;
}

＆＃13;

<h1>Part1</h1>
This is a post about Universe.

<h2>Part1.1</h2>
First we talk about the Galaxy.

Facts about the Galaxy.
Now you know the Galaxy.

<h3>Part1.1.1</h3>
More details about the Galaxy.

<h2>Part1.2</h2>
Facts aoubt another galaxy.

<h1>Part2</h1>

＆＃13;

Answer 2

你需要使用像div这样的元素。

你可以查看这个小提琴https://jsfiddle.net/kh50e9nz/

h2, h2 + * {padding-left:100px;}
h3, h3 + * {padding-left:200px;}

用于表示帖子的不同级别内容的CSS / SCSS规则

2 个答案: