使用element +元素定位多个后续元素

Question

我想要做的是使用以下代码定位多个<p>：

h1+p
{
    margin-left: 20px;
}

h2+p
{
    margin-left: 27px;
}

h3+p
{
    margin-left: 35px;
}

以下是我想要达到的效果：

问题在于，当有一个新的<p>元素时，文本块显然会恢复到正常位置，没有边距，并且不再与标题内联。

（像这样）

有没有更好的方法来解决这个问题？ （或者那个适用于此事的人）

Answer 1

您可以稍微通过使用常规同级选择器~而不是相邻的同级选择器+来实现此目的：

h1~p
{
    margin-left: 20px;
}

h2~p
{
    margin-left: 27px;
}

h3~p
{
    margin-left: 35px;
}

请注意这一点，特别是如果您的h1，h2，h3和p元素共享同一个父元素。由于样式级联以及兄弟选择器如何工作的方式，所有跟在最后p元素之后的h3元素将获得35像素的边距，即使容器中的最后一个标题是h1或h2。

例如，如果你有这个Markdown：

# Heading 1

Paragraph

Paragraph

## Heading 2

Paragraph

Paragraph

### Heading 3

Paragraph

Paragraph

## Heading 2

Paragraph

Paragraph

最后四个段落的边距为35像素，包括上一个h2后面的两个，因为您的h3~p规则是级联顺序中的最后一个并且所有元素共享同一个父元素。这可能是也可能不是你想要达到的效果（我猜它不是）。

对此我没有纯粹的CSS解决方法，我担心;您将不得不使用JavaScript对渲染的标记进行后期处理，以根据您的标题为您的段落添加类等。

Answer 2

这是你想要实现的目标吗？ http://jsfiddle.net/chrismackie/5DgNH/