Hierarchal评论系统

Question

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

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

Answer 1

正如伊恩所说，nth-child一次只能在一个层次上工作。如果您想了解第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类，...不管有多少水平，你有。