Пропуск границы, когда есть 2 последовательных абзаца

У меня есть стиль абзаца, который включает границы:

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

Когда мой документ содержит 2 последовательных абзаца "Осторожно", я бы хотел опустить границы между этими абзацами. Я хочу опустить две границы: border-bottom в первом абзаце и border-top во втором абзаце.

Так что это мой желаемый результат:

Кажется, что нет селектора CSS, который позволил бы мне взглянуть на следующий абзац.
border-collapse: collapse; не имеет желаемого результата либо.

Это возможно? (Я работаю над CSS Paged Media с использованием средства рендеринга Antennahouse, но это не похоже на вопрос для 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 ответа

Решение

В итоге я использовал 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;
}
Источник

Следующее может быть решением:

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 класс (что также означает, что это не последний дочерний элемент, поэтому предыдущий случай не будет применяться) добавить border-top к соседнему брату.

Это будет работать, как и предполагалось, с одним, двумя или более последовательными p.caution,

Источник

Если вы обещаете иначе не использовать ::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 это идет с AH Formatter. Если вы используете другое значение, то вам также нужно использовать его здесь.

Источник

Новый ответ

Вы можете попробовать что-то вроде этого:

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>

Источник
Другие вопросы по тегам