0

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

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

当我的文档包含 2 个连续的“警告”段落时，我想省略这些段落之间的边界。我想省略两个边框：第一段的边界底部和第二段的边界顶部。

所以这是我想要的结果：

在此处输入图像描述

似乎没有允许我查看下一段的 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>
4

4 回答 4

2

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

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是与 class 的另一个元素的相邻兄弟.caution，则删除其上边框。
  • 如果.caution是:last-child，添加一个border-bottom
  • 如果.caution有一个没有.caution类的相邻兄弟（这也意味着它不是最后一个孩子，因此前一种情况不适用）添加border-top到相邻兄弟。

这将按预期与一个、两个或多个连续p.caution的 .

于 2018-07-01T17:47:46.183 回答
1

新答案

你可以尝试这样的事情：

p.caution {
  border-top: 1.5pt double #FF0000;
  border-bottom: 1.5pt double #FF0000;
  margin:2px;
  padding:10px;
}
p.caution + p.caution {
  border-top-color:#fff;
  margin-top:-3pt;
  position:relative;
}
<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>

旧答案

如果所有的p都在同一个容器中，你可以尝试这样的事情：

p.caution {
  border-top: 1.5pt double #FF0000;
  margin:0;
  padding:20px;
}
p.caution:last-child {
    border-bottom: 1.5pt double #FF0000
}
<div>
  <p class="caution">some text</p>
  <p class="caution">some text</p>
  <p class="caution">more text</p>
  <p class="caution">some text</p>
</div>

只有一个p它也可以正常工作：

p.caution {
  border-top: 1.5pt double #FF0000;
  margin:0;
  padding:20px;
}
p.caution:last-child {
    border-bottom: 1.5pt double #FF0000
}
<div>
  <p class="caution">some text</p>
</div>

更新

要省略你之间的所有边界，p你可以试试这个：

p.caution {
  margin:0;
  padding:20px;
}
p.caution:first-child {
    border-top: 1.5pt double #FF0000
}
p.caution:last-child {
    border-bottom: 1.5pt double #FF0000
}
<div>
  <p class="caution">some text</p>
  <p class="caution">some text</p>
  <p class="caution">more text</p>
  <p class="caution">some text</p>
</div>

于 2018-07-01T15:48:54.493 回答
1

如果您承诺不使用::before任何可以遵循警告的内容：

.caution {
  border-top: 1.5pt double red;
}
.caution:last-child {
  border-bottom: 1.5pt double red;
}

.caution + .caution {
  border-top: none;
}
.caution + *:not(.caution) {
  margin-top: -1.12em;
}
.caution + *:not(.caution)::before {
  border-top: 1.5pt double red;
  display:block;
  content: "";
  margin-bottom: 1.12em;
}

1.12em来自html.cssAH Formatter 的那个。如果您使用不同的值，那么您也需要在此处使用它。

于 2018-07-02T09:23:50.930 回答
0

我最终使用 XSLT 来修改我的输入 HTML。我添加了一个属性来指定我希望边框出现的位置：

<xsl:template match="p[@class='caution']">
        <xsl:copy>
            <xsl:apply-templates select="@*"/>
            <xsl:attribute name="border-after">
                <xsl:choose>
                    <xsl:when test="following-sibling::*[1]/@class='caution'">no</xsl:when>
                    <xsl:otherwise>yes</xsl:otherwise>
                </xsl:choose>
            </xsl:attribute>
            <xsl:attribute name="border-before">
                <xsl:choose>
                    <xsl:when test="preceding-sibling::*[1]/@class='caution'">no</xsl:when>
                    <xsl:otherwise>yes</xsl:otherwise>
                </xsl:choose>
            </xsl:attribute>
            <xsl:apply-templates select="node()"/>
        </xsl:copy>
    </xsl:template>

在我的 CSS 中：

p.caution[border-after="yes"] {
    border-bottom: 3pt double #FF0000;
} 
p.caution[border-after="no"] {
    margin-bottom: 3pt;
} 
p.caution[border-before="yes"] {
    border-top: 3pt double #FF0000;
}
p.caution[border-before="no"] {
    margin-top: 3pt;
}
于 2018-07-06T14:14:42.173 回答