Question

您好我正在尝试使用last-child运算符隐藏应用边框的最后一个div。我的问题是las div仍然在底部有边框

以下是我的测试的HTML

<div class="car-search">
    <!--other divs removed for example-->
    <div class="border-bottom"></div>
</div>

<div class="car-search">
    <!--other divs removed for example-->
    <div class="border-bottom"></div>
</div>

CSS

.car-search .border-bottom{
    border-bottom: 1px solid $lighterGrey;
    padding-top: 15px;
    margin-bottom: 15px;
    width: 770px;
    margin-left: 15px;
}
.car-search:last-child .border-bottom{
    display: none;
}

我不知道为什么在最后.car-search

上显示边框

当前输出：

.car-search .border-bottom {
  border-bottom: 1px solid #000;
  padding-top: 15px;
  margin-bottom: 15px;
  width: calc(100% - 30px);
  margin-left: 15px;
}
.car-search:last-child .border-bottom {
  display: none;
}

尝试

我也尝试使用!important标记但没有成功

我试过:last-of-type没有成功

Answer 1

不幸的是，CSS中没有last-of-class选择器。您需要从上一个.border-bottom元素中删除.car-search元素，或者回退到Javascript / jQuery以从DOM中删除该元素。

例如，您可以运行以下jQuery代码来删除最后.car-search个元素.border-bottom：

$('.car-search').last().children('.border-bottom').remove();

jsFiddle Demo

或者，如果您希望为此使用纯CSS，则可以将.car-search元素包装在容器<div>内并使用:last-of-type选择器。

例如，您的新结构可能如下所示：

<div class="car-search-wrapper">    
    <div class="car-search">
        <!--other divs removed for example-->
        <div class="border-bottom"></div>
    </div>
    <div class="car-search">
        <!--other divs removed for example-->
        <div class="border-bottom"></div>
    </div>
</div>

然后你可以使用：

.car-search:last-of-type .border-bottom {
    display: none;
}

jsFiddle Demo

Answer 2

如上所述，目前没有：最后一个选择器，所以唯一的方法是使用javascript。使用jQuery，您可以运行以下代码：

jQuery('div.car-search:last .border-bottom').css({display:'none'});

另外用scss你可以写

.car-search {
    .border-bottom {
        border-bottom: 1px solid $lighterGrey;
        padding-top: 15px;
        margin-bottom: 15px;
        width: calc(100% - 30px);
        margin-left: 15px;    
    }

    &:last-of-type {
        .border-bottom {
            display: none;
        }
    }
}

scss行少了一点。

在编译的CSS中：

.car-search .border-bottom {
    border-bottom: 1px solid $lighterGrey;
    padding-top: 15px;
    margin-bottom: 15px;
    width: calc(100% - 30px);
    margin-left: 15px;    
}

.car-search:last-of-type .border-bottom {
    display: none;
}

CSS：最后一个孩子的意外行为

2 个答案: