css - scss/sass和目标最后一个div边框底部

Closed. This question is off-topic。它当前不接受答案。
                            
                        
                    
                
                            
                                
                
                        
                            
                        
                    
                        
                            想改善这个问题吗？ Update the question，所以它是on-topic，用于堆栈溢出。
                        
                        上个月关闭。
                                                                                            
                
        
因此，我拥有该卡组组件，并且其中包含单独的卡。除了最后一个，我想删除所有边框的底部。我解决不了我正在使用sass / scss

<CardGroup className="cardgroup">
   <Card className="card"><div>other stuff</div></Card>
   <Card className="card">stuff two<div>whatever</div></Card>
   <Card className="card">stuff three</Card> <--- KEEP BORDER BOTTOM HERE
</CardGroup>

我所有的孩子都有边界..（卡）我要删除卡边框底部。从卡组中删除。我的CSS看起来像：请记住，我使用十六进制/ ing，所以CSS名称会更改。当然，我将获得“基本”名称，所以这就是我这样做的原因：* = card。它似乎删除了所有子项，但也删除了孙子项等...我似乎不能只针对包含“ card”的LAST css类，以抑制边界底。

我尝试了几件事（例如，最后一个孩子）。有任何想法吗？

    .cardgroup > [class*='card']:not(last-of-type)  {
        border-bottom: none;
      }


    .card {
      background-color: $white;
      border-bottom: $border200;
      border-top: $border200;
    }

最佳答案

您忘记了:上的:last-of-type。见下文：

.card:not(:last-of-type) {
    border-bottom:2px solid black;
}

<div class="cardgroup">
  <div class="card">
  Lorem Ipsum
  </div>
  <div class="card">
  Lorem Ipsum
  </div>
  <div class="card">
  Lorem Ipsum
  </div>
</div>