css - 階層的コメントシステム

Question

私は現在、フロントエンドの設計を行っており、数人のバックエンドプログラマーと協力しています。これは私にとって新しいプロセスです。

コメントの階層を備えたコメントのシステムを構築しようとしています。さまざまなレベルのスタイルを設定する最も簡単な方法は、n番目の子リストとネストされたリストを使用することだと思いましたが、その方法に頭を悩ませることはできません。アイデア？

Answer 1

イアンが言ったように、n番目の子は一度に1つのレベルでしか機能しません。n番目の子をよりよく理解したい場合は、次のリソースを参照してください。

• http://reference.sitepoint.com/css/pseudoclass-nthchild
• http://css-tricks.com/how-nth-child-works/
• http://www.impressivewebs.com/css3-pseudo-class-expressions/
• http://lea.verou.me/demos/nth.html-インタラクティブなので、これは素晴らしいです

いずれにせよ、ここであなたが考慮したいと思うかもしれないことがあります：階層的なコメントの場合に迷惑になる可能性があることの1つは、特定のレベルから、それらが非常に狭くなり、見栄えが悪くなり、少しでも読むことができるという事実ですより困難。これが、レベルの数を制限することを好む理由です。前述のdisqusは、ネストレベルの数を制限するオプションを提供します。

レベルの数が限られている場合、たとえば3つまたは5つの場合は、レベルごとにクラスを追加して（、、、top-level）、スタイルを変えることができます。あなたが持っているもう一つのオプション、そしてこれはレベルの数を制限することに依存しません、あなたがHTMLを生成するときにいくつかの/クラスを追加することによって奇数と偶数のレベルを異なってスタイルすることです。second-levelthird-levelodd-leveleven-level

基本的に、次のようなものになります。

<ul class="comments">
    <li class="comment first-level">
        <div class="comment-data">[date, time, comment author, link]</div>
        <div class="comment-body">[whatever is said in the comment]</div>
        <div class="comment-footer">[reply option, show/hide comment thread option]</div>
        <ul class="comment-thread">
            <li class="comment second-level">
                <div class="comment-data">[date, time, comment author, link]</div>
                <div class="comment-body">[whatever is said in the comment]</div>
                <div class="comment-footer">[reply option, show/hide comment thread option]</div>
                <ul class="comment-thread">
                    [... and so on...]
                </ul>
            </li>
        </ul>
    </li>
</ul>

私がよく考えるなら、レベルがいくつあっても、、、...のようなクラスを追加できlevel-1ますlevel-2。