我想使用 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; }
如上所示,所有的边框都被移除了。
我怎样才能解决这个问题?有人有什么想法吗??
我正在寻找的输出是: 克隆 |删除 |中止 |暂停
最佳答案
尝试
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
.
- 是 div 的子元素
关于html - 如何删除 css 中最后一个 child 的右边框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23586949/