Question

我想知道它是否可能在给定类的两个元素之间插入一个新元素。我只想使用css，例如：

<div class="a">
<div class="a">

<div class="b">
<div class="b">
<div class="b">
<div class="a">

<div class="b">
<div class="a">

<div class="b">
<div class="a">

我想在＆＃34; a＆＃34;之间插入一个新元素。和＆＃34; b＆＃34; （但反之亦然）：

<div class="a">
<div class="a">
<blank-line>

<div class="b">
<div class="b">
<div class="b">
<div class="a">
<blank-line>

<div class="b">
<div class="a">
<blank-line>

<div class="b">
<div class="a">

Answer 1

如果您只需要元素之间的空格，请尝试此操作：

.a + .b {
    padding-top: 50px;
}

jsFiddle Demo

如果您想要更多控制，请使用::before，如下所示：

.a + .b::before {
    content: '';
    display: block;
    height: 50px;
    background: green;
}

jsFiddle Demo

Answer 2

您可以使用content:指令在html元素之前或之后添加内容（令人惊讶！）：

/* Add something after every .a div: */
.a:after {
    content: "whatever you want to add in here"
}

/* Add something before every .b div: */
.b:before {
    content: "whatever you want to add in here"
}

查看some exciting things that css content can do！请注意，您无法添加HTML元素 - 它们将显示为文本 - 但您可以添加要定位的元素的属性（有关详细信息，请参阅链接页面）。

如果您只想在.a和.b div之间留出较大空间，最好使用填充或边距：

.a + .b {
    padding-top: 100px;
}

仅在给定类的两个元素之间添加元素（使用css）

2 个答案: