删除右边边框:最后一个子伪类

Question

这让我发疯了。我可能忽略了一些超级简单的东西，因为我通常对伪类之类的东西没有问题。

我正在尝试删除最后一个孩子的div 元素上的右边框。我可以让它与最后一个元素上的类一起工作，但我不需要那样做(因为内容将在 ee 循环中(。

这是代码。所有内容都包含在 id 为 #small 的部分中。嵌套在引导列中的所有内容都包装在 #featured 包装器中。

<section id="small-featured">
  <div class="container">
    <div class="row">
      <div class="col-md-3">
        <div class="featured-wrapper">
          <a href="#"><img src="assets/img/36-6022.png" alt=""></a>
          <p>The Product Title</p>
        </div>
      </div>
      <div class="col-md-3">
        <div class="featured-wrapper">
          <a href="#"><img src="assets/img/36-5100.jpg" alt=""></a>
          <p>The Product Title</p>
        </div>
      </div>
      <div class="col-md-3">
        <div class="featured-wrapper">
          <a href="#"><img src="assets/img/46-455.jpg" alt=""></a>
          <p>The Product Title</p>
        </div>
      </div>
      <div class="col-md-3">
        <div class="featured-wrapper">
          <a href="#"><img src="assets/img/unisaw.jpg" alt=""></a>
          <p>The Product Title</p>
        </div>
      </div>
    </div>
  </div>
</section>

这是 CSS

#small-featured {
  text-align: center;
}
#small-featured img {
  width: 250px;
  padding: 0 15px;
}
.featured-wrapper {
   border-right: 1px solid #eee;
}
#small-featured .featured-wrapper:last-child {
   border-right: none;
}

当我添加最后一点 CSS 时，所有的边框都消失了。我也尝试只定位.featured-wrapper：last-child。

有什么想法吗？

Answer 1

#small-featured .col-md-3:last-child .featured-wrapper {
  border-right: none;
}

(所有.featured-wrapper都是:last-child。 ̄\_(ツ)_/̄