html - CSS :last-child overriding all

Question

带有 :last-child 的 css 覆盖所有其他。

.service-teaser .item:first-child {                                     
    margin-left: 0px;                                               
    margin-right: 50px;
}                                                                       

.service-teaser .item:last-child {                                      
    margin-left: 50px;                                              
    margin-right: 0px;                                             
}    

我的 html 如下所示:

<div class="container service-teaser>
  <div class="row">
    <div class="col-md-4">
      <a href="#" class="item"></a>
    </div>
    <div class="col-md-4">
      <a href="#" class="item"></a>
    </div>
    <div class="col-md-4">
      <a href="#" class="item"></a>
    </div>
  </div>
</div>

现在每个类为“item”的元素都将被 :last-child 覆盖。我的问题在哪里？ :/

Answer 1

问题是您的 .item 元素被包裹在 div 元素中。它们总是 :first-child 和 :last-child div元素。相反，您需要将这些伪类选择器放在 div 元素本身上:

.service-teaser .row div:first-child .item { ... }
.service-teaser .row div:last-child .item { ... }