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類，...不管有多少水平，你有。