html - 如何删除 css 中最后一个 child 的右边框

Question

我想使用 css 删除最后一个 child 的 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

尝试

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

您的代码 div.dividers a:last-child意味着

• 全选<a>例如
  • 是其 parent 的最后一个 child
  • 是 <div> 的后代与类 dividers .

代码div.dividers > div:last-child > a { border-right: none; }意味着

• 全选<a>例如
  • 是 div 的子元素 <div>哪个
    • 是其 parent 的最后一个 child
    • 是 <div> 的 child 与类 dividers .