如何删除CSS中最后一个子元素的右边框

Question

我想使用 css 删除最后一个孩子的右边框。我正在使用下面的 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

尝试

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。