css - 如何将第一个 child 和最后一个 child 添加到我的部分？

Question

在我的一个页面上，我有五个相似的 div，我希望在第一个和最后一个 div 的顶部和底部添加一个边框。

HTML:

<div class="info_box">
    Text content is here
</div
<div class="info_box">
    Text content is here
</div>

...等等...

CSS:

.info_box{
    top: 8em;
    float: left;
    max-width:100%;
    max-height: 50px;
    position: relative;
    overflow: hidden;
    background-color: rgba(255, 0, 0, 0.0.5);
}
.info_box:first-child{
    border-top: 1 px solid #666;
}
.info_box:last-child{
    border-bottom: 1 px solid #666;
}

谁能告诉我我做错了什么？

Answer 1

只需将“with-border”类添加到第一个和最后一个 div(或您想要有边框的任何 div)，然后将其添加到您的 css:

.with-border {
    border-bottom: 1 px solid #666;
}

因此您的第一个和最后一个 div 将是:

<div class="info_box with-border">
    Text content is here
</div>