只在给定类的两个元素之间添加一个元素(使用css)

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">

我想在"a“和"b”之间插入一个新元素(反之亦然)：

<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演示

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

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

jsFiddle演示

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"
}

看看css内容可以做的一些令人兴奋的事情！请注意，您不能添加元素--它们将显示为文本--但是您可以添加目标元素的属性(有关更多信息，请参见链接页面)。

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

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