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>

假设我们想要放置＃34;＃待放置＆＃34; div之后的第3段，有没有办法在CSS中做到这一点？我可以这样引用第3段：

content.p:nth-child(3)

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

注意：#to-be-placed div可能位于#content div的开头或结尾。

P.S。请不要提出硬编码的尺寸和位置。这不会奏效。

P.S。万一你对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>

Answer 2

你不能完全这样做，但可能的解决方法是将div定义为第3个p元素上的:: after元素。这在技术上将div放在p中，但它可以做你正在寻找的东西。

p:nth-child(3)::after {
    content: "Move Me";
    display: block;
}

Answer 3

简短回答：不，你不能这样做。 CSS（层叠样式表）专为样式设计。它不是用于操纵DOM元素的。另一方面，JavaScript是为此而构建的。因此，如果您碰巧想要使用CSS来操作DOM，那么您可能需要重新考虑解决方案的方法。