css - 分级评论系统

Question

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

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

Answer 1

正如 Ian 所说，nth-child 一次只能在一个级别上工作。如果您想更好地理解 nth-child，这里有一些资源:

• > 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) 并设置不同的样式。您拥有的另一种选择(不依赖于限制级别数)是通过添加一些 odd-level/even-level 来设置不同样式的奇偶级别生成 HTML 时的类。

基本上，你会得到这样的东西:

<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...，无论您有多少级别。