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) 并设置不同的样式。您拥有的另一个选项，并且这个选项不依赖于限制级别的数量，是通过在生成 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