Question

我有一系列

标签，例如

<div id="info">
    <h1>some title</h1>
    <p>some content</p>
    <h1>some title</h1>
    <p>some content</p>
    <h1>some title</h1>
    <p>some content</p>
</div>

我需要在每个

标记后面添加一个图像分隔符，但不要在最后一个

之后。

我定义了以下css样式：

#info {
    margin-left:245px;
    width: 545px;
}

#info h1{
    color:#000;
    font-size:24px;
    font-weight:100;
}

#info p{
    color:#6c6f70;
    font-size:22px;
}

#info p:last-child :after{
    content: "";
}

#info h1+p:after{
    content: " " url(../img/dotseparator.png);
    padding-top:25px;
    display:block;
    height:8px;
}

但是即使在最后一段之后我也得到了分隔符...你能帮我解决一下我的风格有什么问题吗？谢谢！

Answer 1

试试这个

 #info h1+p:not(last-of-type):after{
        content: " " url(../img/dotseparator.png);
        padding-top:25px;
        display:block;
        height:8px;
    }

Answer 2

＆LT; -HR-＆GT;对于分隔符demo

来说很简单

<div id="info">
    <h1>some title</h1>
    <hr>
    <p>some content</p>
    <hr>
    <h1>some title</h1>
     <hr>
    <p>some content</p>
     <hr>
    <h1>some title</h1>
     <hr>
    <p>some content</p>
     <hr>
</div>

CSS选择器和标签组合

2 个答案: