我如何使用css last-child？

Question

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

 #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

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来选择最后两个孩子，而不是使用:nth-last-child(-n+2)来选择最后一个孩子。如果最后一个孩子是.indented DIV，则此方法有效，因为我们的.comment选择器会将其过滤掉。但是，如果最后一个孩子都是.comment DIV，那么CSS样式将适用于它们，这导致http://jsfiddle.net/93tZV/4/我不知道如何解决这个问题。

Answer 2

您的HTML结构存在缺陷，因此替代解决方案是添加right_bottom_round类，您希望右下角四舍五入。

.right_bottom_round {
  border-bottom-right-radius: 5px !important;
}

并查看browser compatibility here