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

Question

我尝试删除类名为"true"的last-child的边框.: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,你不能选择具有特定类的divlast-of-type

你可以试试:

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

的jsfiddle