css - 当有 2 个连续段落时省略边框

Question

我有一个包含边框的段落样式:

p.caution {
    border-top: 1.5pt double #FF0000;
    border-bottom: 1.5pt double #FF0000;
}

当我的文档包含 2 个连续的“警告”段落时，我想省略这些段落之间的边框。 我想省略两个边框:第一段的 border-bottom 和第二段的 border-top。

所以这是我想要的结果:

似乎没有CSS选择器让我看下一段。
border-collapse: collapse; 也没有得到想要的结果。

这可能吗？ (我正在使用 Antennahouse 渲染器处理 CSS Paged Media，但这似乎不是特定于 Paged Media 的问题)

HTML 片段:

<div>
  <p class="other">some text</p>
  <p class="caution">some text</p>
  <p class="caution">more text</p>
  <p class="other">some text</p>
</div>

Answer 1

以下可能是一个解决方案:

p {
  margin: 0; 
}

.caution {
  border-top: 4px double red;
}

.caution + .caution {
  border-top: none;
}

.caution:last-child {
  border-bottom: 4px double red;
}

.caution + p:not(.caution) {
  border-top: 4px double red;
}

<div>
  <p class="other">some text</p>
  <p class="caution">some text</p>
  <p class="caution">more text</p>
  <p class="other">some text</p>
</div>

这段代码在做什么:

• 添加一个border-top到.caution
• 如果 .caution 是另一个具有 .caution 类的元素的相邻兄弟元素，则移除其顶部边框。
• 如果.caution是:last-child，添加一个border-bottom
• 如果 .caution 有一个没有 .caution 类的相邻兄弟(这也意味着它不是最后一个 child ，因此前面的情况不适用)将 border-top 添加到相邻的兄弟。

这将按预期与一个、两个或多个连续 p.caution 一起工作。