html - 即使第一个孩子在嵌套 div 中工作，也无法让最后一个孩子正常工作

Question

我正在尝试教自己使用第一个孩子和最后一个孩子来操作大量嵌套的元素/标签。我问了另一个问题，我认为我已经完全理解了最后一个孩子/第一个孩子，但显然我仍然没有得到它。

我不知道为什么下面的最后一个子代码不能正常工作。

div.row div.col-4 div.row:first-child {
    background-color: yellow;
}

div.row div.col-4 div.row:last-child {
    background-color: blue;
}

<div class="container">
        <div class="row">
           
           
            <div class="col-4">
               <div class="row">
                   <div class="col-4">
                       <button class="btn btn-primary"><a href="#">some text | <span>red text here</span></a></button>
                   </div>
               </div>
               <div class="row">
                   <div class="col-4">
                       <button class="btn btn-primary"><a href="#">some text | <span>white text</span></a></button>
                   </div>
               </div>
               <div class="row">
                   <div class="col-4">
                       <button class="btn btn-primary"><a href="#">some text | <span>white text</span> - this row should be blue</a></button>
                   </div>
               </div>
               
                <a href="#" class="btn btn-primary">Primary Button |<span> yellow text here</span></a>
            </div>
            
            
            <div class="col-4">
               <div class="row">
                   <div class="col-4">
                       <button class="btn btn-primary"><a href="#">some text | <span>red text here</span></a></button>
                   </div>
               </div>
               <div class="row">
                   <div class="col-4">
                       <button class="btn btn-primary"><a href="#">some text | <span>white text</span></a></button>
                   </div>
               </div>
               <div class="row">
                   <div class="col-4">
                       <button class="btn btn-primary"><a href="#">some text | <span>white text</span> - this row should be blue</a></button>
                   </div>
               </div>
               
                <a href="#" class="btn btn-primary">Primary Button |<span> yellow text here</span></a>
            </div>
            
            
            <div class="col-4">
               <div class="row">
                   <div class="col-4">
                       <button class="btn btn-primary"><a href="#">some text | <span>red text here</span></a></button>
                   </div>
               </div>
               <div class="row">
                   <div class="col-4">
                       <button class="btn btn-primary"><a href="#">some text | <span>white text</span></a></button>
                   </div>
               </div>
               <div class="row">
                   <div class="col-4">
                       <button class="btn btn-primary"><a href="#">some text | <span>white text</span> - this row should be blue</a></button>
                   </div>
               </div>
               
                <a href="#" class="btn btn-primary">Primary Button |<span> yellow text here</span></a>
            </div>
            
            
            

        </div>
    </div>

标签： htmlcss