代码之家 › 专栏 › 技术社区 › Hobbes

有两个连续段落时省略边框

antenna-house css

0

Hobbes · 技术社区 · 7 年前

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

p.caution{
上边框:1.5pt双ff0000;
下边框:1.5pt双ff0000;
}
当我的文档包含两个连续的“警告”段落时,我想省略这些段落之间的边框。
我想省略两个边框:第一段的边框底部和第二段的边框顶部。

所以这是我想要的结果:



似乎没有CSS选择器允许我查看下一段。

border collapse:collapse;does't have the desired result either.


这有可能吗?
(我正在使用天线室渲染器处理CSS页面媒体,但这似乎不是特定于页面媒体的问题)

HTML代码段:

<div>
<p class=“Other”>一些文本</p>
<p class=“caution”>一些文本</p>
<p class=“caution”>更多文本</p>
<p class=“Other”>一些文本</p>
</DIV>


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

所以这是我想要的结果:



似乎没有CSS选择器允许我查看下一段。

border-collapse: collapse;也没有期望的结果。

这有可能吗?
(我正在使用天线室渲染器处理CSS页面媒体,但这似乎不是特定于页面媒体的问题)

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 回复 | 直到 7 年前

1

2

ainarela 7 年前

以下可能是解决方案:

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
如果 .注意 是具有类的另一个元素的相邻同级 .注意 ,删除其上边框。
如果 .注意 是 :last-child ,添加 border-bottom
如果 .注意 有一个相邻的兄弟姐妹没有 .注意 类(这也意味着它不是最后一个子级,因此前一个案例将不适用)添加 上边框 到相邻的兄弟姐妹。

这将在一个、两个或多个连续的 p.caution .

2

1

Temani Afif 7 年前

新答案

您可以尝试如下操作:

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.注意{
上边框:1.5pt双ff0000;
边距:0;
填料:20px;
}
注意:最后一个孩子{
底部边框:1.5pt双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
}

<分区>
<p class=“caution”>一些文本</p>
<p class=“caution”>一些文本</p>
<p class=“caution”>更多文本</p>
<p class=“caution”>一些文本</p>
</DIV>

3

1

Tony Graham 7 年前

如果你承诺不使用 ::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.css 那是和格式设置工具一起提供的。如果您使用的是不同的值,那么您还需要在这里使用它。

4

0

Hobbes 7 年前

最后我使用了一个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;
}