html - 从第 2 段开始的文本缩进

Question

我有来自 DB ($row[text]) 的文本，它看起来像：

<p>First</p>
<p>Second</p>
<p>Third</p>

我想从第二段开始应用“文本缩进”。我知道，它可以与以下类一起应用：

.a{text-indent: 20px}

<p>First</p>
<p class="a">Second</p>
<p class="a">Third</p>

但我不能这样做，因为我不能编辑数据库。当我使用 p{text-indent: 20px} 它适用于所有段落

Answer 1

这取决于p元素的标记上下文和所需的排版实践。例如，如果p元素跟在列表或表格之后，它应该缩进吗？意见不一。无论如何，一旦您决定了排版策略，您可能可以使用合适的上下文选择器来处理它（除非您需要担心相当旧的 IE 版本）。

在一个极端情况下，只有当它紧跟在另一个段落之后，你才能缩进一个段落，因为这是真正需要缩进的上下文。由于您通常希望在使用缩进时防止段落之间的默认垂直间距，因此您可以使用

p + p { text-indent: 1em; }
p { margin: 0; }

（使用em单位优于px，因为它适应字体大小的变化。通常1em就足够了。）

Answer 2

您可以通过将text-indent应用于所有p标签并在 上删除它来做到这一点first-child：

p{text-indent: 20px}
p:first-child{text-indent:0}

<p>First</p>
<p>Second</p>
<p>Third</p>

Answer 3

您可以使用 nth-child 伪类来实现这一点。它接受一个公式以及用 0 代替 n 等等，所以你的公式变成2+n

p:nth-child(2+n){text-indent: 20px}

<p>First</p>
<p>Second</p>
<p>Third</p>