4

我有一个评论列表，我想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代码解决它。有什么建议吗？

小提琴的简单代码小提琴

4

2 回答 2

2

我已经能够使用以下 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)选择最后两个孩子。如果最后一个孩子是.indentedDIV，则此方法有效，因为我们的.comment选择器会将其过滤掉。但是，如果最后两个孩子都是.commentDIV，则 CSS 样式将适用于它们，这导致http://jsfiddle.net/93tZV/4/我不知道如何解决这个问题。

于 2012-09-16T16:50:46.183 回答
1

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

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

并在此处检查浏览器兼容性

于 2012-09-16T15:47:44.820 回答