CSS：last-child意外行为[重复]

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 选择器。您要么需要从最后一个 .car-search 元素中删除 .border-bottom 元素，要么回退到 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

如上所述，目前没有 :last-of-class 选择器，因此唯一的方法是使用 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;
}