从最后一个孩子的CSS删除边界(Remove border from last child css)

2019-10-20 04:04发布

考虑这个标记:

<div class="container">
    <div class="row first">
        <div class="col-lg-6 flush-col">
            <div class="thumbnail-services">
                <h3>Design</h3>
             </div>
        </div>
        <div class="col-lg-6 flush-col">
            <div class="thumbnail-services">
                <h3>Design</h3>
           </div>
        </div>
    </div>
    <div class="row second">
        <div class="col-lg-6 flush-col">      
            <div class="thumbnail-services">
                <h3>Design</h3>
            </div>
        </div>
        <div class="col-lg-6 flush-col">      
            <div class="thumbnail-services">      
                <h3>Design</h3>
            </div>
        </div>
    </div>
</div>

这里是一个小提琴

我要的是去除那些最后两个栏(最后一个第一行和第二行最后一个)右边框

我已经使用这个尝试:

.thumbnail-services:last-child {border-right:0px;} but is not working.

任何想法,我应该怎么做才能让与CSS伪元素这项工作:last-child

Answer 1:

thumbnail-services是不是该行的最后一个孩子,但flush-col (或一般列)。 分别选择。

.flush-col:last-child .thumbnail-services 

http://jsfiddle.net/C8buA/1/



Answer 2:

基于cale_b评论。

.thumbnail-services{border-right:1px solid black; border-bottom:1px solid black}
.row .col-lg-6:last-child .thumbnail-services{border-right:none;}

http://jsfiddle.net/smurphy/9v7tt/



文章来源: Remove border from last child css