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)して最後の2つの子を選択します。これは、最後の子が.indentedDIVの場合に機能します。これは、.commentセレクターがそれをフィルターで除外するためです。ただし、最後の子が両方ともDIVである場合、CSSスタイルが両方に適用されるため、 http：.comment //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 に答える