HTML에서 계속 계산하여 중첩된 순서 목록에 번호를 매기는 방법은 무엇입니까?

HTML의 중첩된 순서 목록 수

중첩된 순서 목록이 있고 중첩 요소의 두 번째 수준을 변경하려고 합니다. 번호 매기기 방법 이전 레이어의 숫자를 상속하고 계속 계산할 수 있습니다. 현재 두 번째 수준 요소는 1부터 다시 계산되기 시작하지만 2.1, 2.2, 2.3과 같이 소수점 이하 자릿수로 번호를 매기려고 합니다.

이 문제는 다음 방법으로 해결할 수 있습니다.

CSS 솔루션(모든 최신 브라우저)

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;
}

이 CSS는 카운터 메커니즘을 사용합니다. 각 중첩 수준에 대해. 모든 최신 브라우저에서 잘 작동합니다.

IE6/7 호환 JQuery 솔루션

Internet Explorer 6/7의 경우 Pure CSS 솔루션이 작동하지 않습니다. 따라서 대체 메커니즘이 필요합니다.

<script>
  $(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>');
        });
      });
    }
  });
</script>

이 jQuery 코드는 Internet Explorer 6/7 브라우저에 숫자를 추가합니다. 중첩된 숫자를 포함하는 요소 앞에 범위를 삽입합니다.

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