계층 적 주석 시스템

Question

저는 프론트 엔드 디자인을하고 있고, 지금 백엔드 프로그래머 몇 명과 함께 일하고 있습니다.

답변의 계층 구조가있는 주석 시스템을 설정하려고합니다. 서로 다른 레벨의 스타일을 만드는 가장 쉬운 방법은 n 번째 자식 및 중첩 된 목록을 사용하는 것이라고 생각했지만 어떻게해야 할지를 고민하지 않았습니다. 아이디어?

Answer 1

이안 (Ian)이 말했듯이 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는 중첩 레벨의 수를 제한하는 옵션을 제공합니다.

레벨 수가 제한되어있는 경우 3 ~ 5 단계라고 가정 해 보겠습니다. 각 레벨 (top-level, second-level, third-level)의 수업을 추가하고 다르게 스타일을 지정할 수 있습니다. 가지고있는 또 다른 옵션은 레벨 수를 제한하는 것에 의존하지 않고, HTML을 생성 할 때 odd-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 같은 클래스를 추가 할 수 있습니다 ... 아무리 많은 수준, 당신은 없다.