如何 select ::after 后跟 p

Question

鉴于此 HTML：

<div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  <hr />
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  <hr />
</div>

我想要一个漂亮的 dingbat 来代替最后的水平线，并为第一个水平线添加一个空行。

然而，考虑一下这个 HTML:

<div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  <hr />
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

这里，hr应该有一个空行，没有装饰符号。

我想我会在每个 hr 之后将 dingbat 放在内容中，然后删除任何 HR 的内容，然后是 p:

hr {
  border: 0;
  text-align: center;
}
hr::after {
  content: "❧"
}

hr::after + p {
  content: "";
}

最后一条规则当然行不通。 :)

如何设置 ::after 内容只有后跟 p？或者，如果 select 没有后续元素，有没有办法只 hr 最后一次出现？

Answer 1

有人会正确地向您指出 there is no previous sibling selector，但您不需要这样做。

您可以仅在 hr 是最后一个 child 时将 dingbat 简单地应用于 hr，如下所示：

div {
  margin-bottom: 1em;
  border: medium solid;
  padding: 0 0.5em;
}
hr {
  border: 0;
  text-align: center;
}
hr:last-child::after {
  content: "❧"
}

<div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  <hr />
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

<div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  <hr />
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  <hr />
</div>

Answer 2

可以简化，只考虑p元素，不考虑hr：

不是最后一次

p:not(:last-child)::after {
  content: "❧";
  display:block;
  text-align:center
}

<div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

只限最后一个：

p:last-child::after {
  content: "❧";
  display:block;
  text-align:center
}

<div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

如何 select ::after 后跟 p

How to select ::after when followed by a p

css

css-selectors

pseudo-class

pseudo-element