Question

我想使用css删除最后一个孩子的border-right。我正在使用下面的HTML：

 <div class="dividers">
     <div class="clone_container">
       <img src="clone.png"/>
        <a class="button-link">Clone</a>
     </div> 
    <div class="delete">
       <img src="delete.png"/>
        <a class="button-link">Delete</a>
     </div>
   <div class="abort">
       <img src="abort.png"/>
        <a class="button-link">Abort</a>
     </div> 
  <div class="pause">
       <img src="pause.png"/>
        <a class="button-link">Pause</a>
     </div>
 </div>     //end of dividers div

和css：

div.dividers a {
display: inline-block;
border-right: 1px solid #DCDCDC;
    border-radius: 4px;
   height: 22px;
}
div.dividers {
   margin-right: -3px;
   padding-right: 0px
   }

   div.dividers a:last-child { border-right: none;  }

当我执行上面显示的{ border-right: none; }时，会删除所有边框。我怎样才能解决这个问题？任何有想法的人？

我正在寻找的输出是：克隆|删除|中止|暂停

Answer 1

您需要定位.dividers div中的最后一个div：

div.dividers div:last-child a { 
   border-right: none;  
}

Example

Answer 2

尝试

div.dividers > div:last-child > a { border-right: none;  }

您的代码div.dividers a:last-child表示

选择所有<a>，例如
- 是其父母的最后一个孩子
- 是<div>的后代，类dividers。

代码div.dividers > div:last-child > a { border-right: none; }表示

选择所有<a>，例如
- div <div>的孩子是哪个
  - 是其父级的最后一个孩子
  - 是<div>的孩子，班级为dividers。

如何删除css中最后一个孩子的border-right

2 个答案: