如何使用css最后孩子？

我有意见的清单，我想用这样的 comment form
一些CSS代码注释的div我使用这个代码来设置最后一个孩子的border-radius，但它不工作。如何使用css最后孩子？

#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 code.Any建议，以解决呢？

捣鼓简单的代码Fiddle

来源

2012-09-16 Farnabaz

用什么浏览器？ – GordonM

我在Safari和Firefox上检查它 – Farnabaz

你试图解决什么问题？你想要什么样的最终结果？ –

我已经能够用这个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/我不知道如何解决此问题。

来源

2012-09-16 16:50:46

非常感谢你，它的工作很好，我解决这个问题，在这里最终解决方案http://jsfiddle.net/farnabaz/KAJsp/ – Farnabaz

你的HTML结构有缺陷，因此替代解决方案是增加right_bottom_round类要将右下角圆形。

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

，并检查browser compatibility here

来源

2012-09-16 15:47:44

仍然无法运行 – Farnabaz

@Farnabaz now请检查 –

'！important'应该是不必要的。 – Spudley

如何使用css最后孩子？

回答

相关问题