css - 我如何使用 css last-child？

Question

我有一个评论列表，我想使用一些像这样的 css 代码评论 div 来设置最后一个 child 的 border-radius
我正在使用此代码，但它不起作用。

 #comments>.comment:last-child, .indented>.comment:last-child{border-bottom-right-radius: 5px;}

它在像这样与 jquery 一起使用时有效

 $('#comments>.comment:last, .indented>.comment:last').css('border-bottom-right-radius', '10px');

但我想用 css 代码解决它。有什么建议吗？

简单代码的 fiddle Fiddle

Answer 1

我已经能够使用此 CSS 代码使其工作(对于提供的 HTML 结构):

#comments > .comment:nth-last-child(-n+2),
.indented > .comment:nth-last-child(-n+2) {
    border-bottom-right-radius: 15px;
}

现场演示: http://jsfiddle.net/93tZV/3/

因此，我们不使用 :last-child 来选择最后一个 child ，而是使用 :nth-last-child(-n+2) 来选择最后一个两个 child 。如果最后一个子元素是 .indented DIV，这会起作用，因为我们的 .comment 选择器会将其过滤掉。但是，如果最后两个子项都是 .comment DIV，则 CSS 样式将应用于它们，这会导致 http://jsfiddle.net/93tZV/4/。我不知道如何解决这个问题。