html - 是否可以仅使用 CSS 在两个段落之间放置一个 DIV？

Question

我想我不能用 CSS 做那个，但想看看是否有人会有这样的解决方案...

我有一个包含页面内容的 div，一个可以位于 HTML 中多个不同位置的 div，以及一组段落。 CSS 必须将第二个 div 放在两个段落之间。

有一个示例 HTML:

<div id="to-be-placed">Move Me</div>
<div id="content">
  <p>P1</p>
  <p>P2</p>
  <p>P3</p>
  <p>P4</p>
  <p>P5</p>
</div>

假设我们想在第 3 段之后放置“#to-be-placed”div，有没有办法在 CSS 中做到这一点？我可以这样引用第 3 段:

content.p:nth-child(3)

但我真的没有办法告诉 CSS 将我的 DIV 移动到那个位置......

注意:#to-be-placed div 可以在#content div 内，在开头或结尾。

附言请不要想出硬编码的大小和位置。那行不通。

附言以防万一您对 jQuery 感到兴奋。我知道如何用 jQuery 做到这一点。所以不，我不需要你给我这样的答案。 (想知道的人请参阅 How to add div tag in-between two paragraphs when wrapped inside main div using jquery。)

Answer 1

这不能使用 CSS 来完成，因为 CSS 不提供任何在 HTML 中移动元素的机制，仅用于样式化现有元素和通过使用伪元素添加新内容。您将获得的最佳解决方案是使用 JavaScript 或 jQuery 的解决方案。

---

如果只想添加带样式的文本内容，可以使用CSS中的::after伪元素添加，但不支持HTML，只支持纯文本:

p:nth-child(2)::after {
    content: "- Added content";
}

<div id="content">
  <p>P1</p>
  <p>P2</p>
  <p>P3</p>
  <p>P4</p>
  <p>P5</p>
</div>