Question

我尝试删除类名为“true”的last-child的border。 :last-child无效。

<div>
    <div class="common true">1111</div>
    <div class="common">2222</div>
    <div class="common true">3333</div>
    <div class="common true">4444</div>
    <div class="common true">5555</div>
    <div class="common true">6666</div>
    <div class="common true">7777</div>
    <div class="common">8888</div>
</div>

的CSS：

.common.true {
    display: block;
    border-top: 1px solid;
} 

.true:last-child {
    border-top: none;
}

JSFIDDLE：http://jsfiddle.net/C23g6/1253/

Answer 1

您应该使用js来解决它。使用css，您可以使用last-child或last-of-type，但在这种情况下，他们无法解决问题，因为：

：last-child选择器匹配其父级的最后一个子元素。

在您的情况下.true不是最后一个孩子

和

：last-of-type选择器匹配其父元素的最后一个子元素特定类型。

在您的情况下，所有元素都是div，您无法选择具有last-of-type的特定类的div

你可以尝试：

$(".true").last().css( "border-top", "none" );

jsfiddle

Answer 2

:last-of-type选择器允许您定位其容器中元素的最后一次出现。

.true:last-of-type {
    border-top: none;
}

如何删除具有特定类名的最后一个div的边框？ [：last-child]不起作用

2 个答案: