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。

我当时想将dingbat放在每个hr之后的内容中，然后删除任何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，但您不需要这样做。

仅当hr是最后一个孩子时，才可以将dingbat应用于：

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的{{1}}元素：

不是最后一个

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
}

当后面接p时如何选择:: after

2 个答案: