css - 使用 element+element 定位多个以下元素

Question

<p>我想要做的是使用以下代码针对多个目标：

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

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

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

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

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

（像这样）

有没有更好的方法来解决这个问题？（或适用于该问题的一种）

score 4 · Accepted Answer

您可以通过使用通用的兄弟选择器而不是相邻的兄弟选择器来实现这一点：~+

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

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

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

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

例如，如果你有这个 Markdown：

# 标题 1

段落

段落

## 标题 2

段落

段落

### 标题 3

段落

段落

## 标题 2

段落

段落

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

恐怕没有纯粹的 CSS 解决方法；您将不得不使用 JavaScript 对呈现的标记进行后处理，以根据您的标题将类等添加到您的段落中。

score 1 · Accepted Answer

1

于 2012-05-03T09:04:04.370 回答

2 回答 2