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;                                             
}