CSS：最后一个孩子压倒一切

Question

css with：last-child覆盖了所有其他的。

.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 和那些div元素的:last-child 。 相反，您需要将这些伪类选择器放在div元素本身上：

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

Answer 2

每个.item都位于它自己的.col-md-4元素中，因此你无法用:first-child方式定位它们:first-child或:last-child 。 .item应该在一个容器内，或者你应该以.col-md-4元素为目标。 例如：

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

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

Answer 3

您的.item元素是唯一的，因此它们的父元素中的最后一个子元素。 为了实现我认为您正在寻找的东西，您需要：

.service-teaser .col-md-4 .item {                                      
    margin-left: 50px;                                              
    margin-right: 0px;                                             
} 

这不是一个建议的解决方案，因为您应该尝试远离使用框架类作为样式的一部分，但是通过对标记的一些小更新，您可以获得相同的结果。

Answer 4

这是因为在范围div.item ，每个项目被认为是第一个和最后一个孩子。

改为：

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

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