일관된 번호 매기기를 사용하여 HTML에서 중첩된 순서 목록을 만드는 방법은 무엇입니까?

번호 매기기가 포함된 HTML의 중첩된 순서 목록

HTML에서 중첩된 순서 목록을 생성할 때 내부 목록에서 번호 매기기를 시작하는 문제가 발생할 수 있습니다. 다시 1부터. 이는 목록의 적절한 흐름을 방해할 수 있습니다. 이 문제를 해결하기 위해 다음 CSS 및 jQuery 기술을 사용할 수 있습니다.

CSS 접근 방식

CSS 스타일을 지원하는 브라우저의 경우 counter-reset 속성을 사용하여 다음을 수행할 수 있습니다. 목록의 각 수준에 대한 번호 매기기를 재설정합니다. counter-increment 속성은 각 목록 항목에 대한 카운터를 증가시킵니다.

html body ol {
  list-style-type: none;
  counter-reset: level1;
}

ol li:before {
  content: counter(level1) ". ";
  counter-increment: level1;
}

ol li ol {
  list-style-type: none;
  counter-reset: level2;
}

ol li ol li:before {
  content: counter(level1) "." counter(level2) " ";
  counter-increment: level2;
}

jQuery Approach

카운터를 지원하지 않는 IE6/7과 같은 이전 브라우저의 경우- 속성을 재설정하려면 jQuery를 사용하여 번호 매기기를 수동으로 삽입할 수 있습니다. 이 방법에는 각 항목 앞에 해당 번호를 포함하는 요소.

$(document).ready(function() {
  if ($('ol:first').css('list-style-type') != 'none') { /* For IE6/7 only. */
    $('ol ol').each(function(i, ol) {
      ol = $(ol);
      var level1 = ol.closest('li').index() + 1;
      ol.children('li').each(function(i, li) {
        li = $(li);
        var level2 = level1 + '.' + (li.index() + 1);
        li.prepend('<span>' + level2 + '</span>');
      });
    });
  }
});

이러한 접근 방식 중 하나를 구현하면 일관된 번호 매기기로 중첩된 순서 목록을 얻을 수 있어 콘텐츠를 더욱 조직적이고 체계적으로 표현할 수 있습니다.

위 내용은 일관된 번호 매기기를 사용하여 HTML에서 중첩된 순서 목록을 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!