Question

考虑这个标记：

<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>

这是一个fiddle

我想要的是删除这两个最后一列的右边框（第一行的最后一行和第二行的最后一行）

我尝试过使用它：

.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/

从上一个子css中删除边框

2 个答案: