css - 如何选择::在后跟 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 应该有一个空行，并且没有 dingbat。

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

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

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

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

如何设置::after 内容仅 后跟p？或者，如果 hr 没有后续元素，是否可以只选择它的最后一次出现？

Answer 1

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

只有当它是最后一个 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>