Question

我有这个结构：

<div id="results">
     <div class="post-item">
         <div class="post-item-inside"></div>
     </div>
     <div class="post-item">
         <div class="post-item-inside"></div>
     </div>
     <div class="post-item">
         <div class="post-item-inside"></div>
     </div>
     <div class="post-item">
         <div class="post-item-inside"></div>
     </div>
     <div class="post-item">
         <div class="post-item-inside"></div>
     </div>
</div>

CSS：

.post-item {
    width: 50%;
    padding: 2.5%;
    margin: 0 auto;
    background: #fff;
}

.post-item-inside {
    width: 95%;
    padding-bottom: 20px;
    border-bottom: 1px solid;
    border-color: #d0d1d5;
    margin: 0 auto;
}

我想删除最后.post-item-inside的边框颜色。我试过这个方法：

.post-item:last-child .post-item-inside {
    border-bottom: none;
}

但它不起作用。我该如何解决？谢谢！

Answer 1

虽然您的代码运行正常，但请尝试以下方法：

#results .post-item:last-child .post-item-inside {
    border-bottom: none;
}

也许您的网站中的其他.post-item元素比#results

中的元素更多

Answer 2

似乎工作正常。

.post-item:last-child .post-item-inside {
   border-bottom: none;
}

Demo

Answer 3

我使用border-top和first-child更改了代码：

.post-item {
    width: 50%;
    padding: 2.5%;
    margin: 0 auto;
    background: #fff;
}

.post-item-inside {
    width: 95%;
    border-top: 1px solid;
    border-color: #d0d1d5;
    margin: 0 auto;
}

#results .post-item:first-child .post-item-inside {
    border-top: none;
}

它有效！

如何删除最后一项的边框

3 个答案: