层次化评论系统

Question

我现在正在做前端设计，并与几个后端程序员一起工作--这对我来说是一个新的过程。

我们正在尝试建立一个评论系统，并为回复建立一个层次结构。我认为设置不同级别样式的最简单方法是使用第n个子列表和嵌套列表，但我不能完全理解如何做到这一点。想法？

Answer 1

正如Ian所说，第n个孩子一次只能在一个级别上工作。如果你想更好地了解第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 -这个很棒，因为它是交互式的

在任何情况下，下面是你可能想要考虑的事情:在分层注释的情况下，有一件事可能会令人恼火，那就是，从某种程度上讲，它们可能会变得如此狭窄，以至于看起来很糟糕，甚至会使阅读变得更加困难。这就是为什么我倾向于限制层数的原因--上面提到的disqus提供了限制嵌套层数的选项。

如果您的级别数量有限，比如说三到五个级别，您可以为每个级别(top-level、second-level、third-level)添加类，并以不同的方式设置它们的样式。您有另一个不依赖于限制级别数量的选择，那就是在生成HTML时添加一些odd-level/ even-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这样的类...不管你有多少关卡。