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

Question

The css with :last-child is overriding all other.

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

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

My html looks like is the following :

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

Now every element with the class "item" will be overriden by :last-child. Where is my problem? :/

Answer 1

The problem is that your .item elements are wrapped in div elements. They are always both the :first-child and :last-child of those div elements. Instead you need to place those pseudo-class selectors on the div elements themselves:

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

Answer 2

Each .item is located within it's own .col-md-4 element, so there is no way you can target them with :first-child or :last-child . .item s should either be within one container or you should target .col-md-4 elements instead. For example:

.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

Your .item elements are the only, and therefore last children within their parent elements. To achieve what I think you are looking for you need:

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

This would not be an advised solution as you should try to stay away from using framework classes as part of your styling, but with some small updates to markup you could achieve the same result.

Answer 4

This is because in the scope of div.item , each item is considered to be both the first and last child.

Do this instead:

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