HTML에서 중첩된 순서 목록에 순차적으로 번호를 매기는 방법은 무엇입니까?

HTML에서 중첩된 순서 목록에 번호를 매기는 방법

HTML에서 중첩된 순서 목록은 일반적으로 중첩 번호 매기기와 함께 표시됩니다. 기본적으로 각 중첩 수준은 1부터 다시 시작됩니다. 그러나 중첩된 요소에 순차적으로 번호를 매기는 것이 바람직할 수 있습니다.

CSS 접근 방식(최신 브라우저에서 작동)

순차 번호 매기기를 달성하려면 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;
}

이 방법은 ol 태그의 내용을 간단한 목록으로 해석하여 순차 번호 매기기를 허용합니다. 브라우저에서는 다음과 같이 중첩된 순서 목록을 표시합니다.

<ol>
  <li>first</li>
  <li>
    second
    <ol>
      <li>2.1. second nested first element</li>
      <li>2.2. second nested second element</li>
      <li>2.3. second nested third element</li>
    </ol>
  </li>
  <li>third</li>
  <li>fourth</li>
</ol>

jQuery 접근 방식(IE6/7 호환)

CSS 접근 방식(IE6/7)을 지원하지 않는 브라우저의 경우 ), jQuery를 사용하여 원하는 번호 매기기를 추가할 수 있습니다.

<script>
  $(document).ready(function() {
    if ($('ol:first').css('list-style-type') != 'none') {
      $('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>

이 JavaScript 코드는 지원되지 않는 브라우저를 대상으로 하며 순서가 지정되지 않은 목록 구조를 수정하여 원하는 번호 매기기를 얻습니다. 이러한 브라우저에서는 중첩된 정렬 목록을 다음과 같이 표시합니다.

<ol>
  <li>first</li>
  <li>
    <p>second</p>
    <p>2.1. second nested first element</p>
    <p>2.2. second nested second element</p>
    <p>2.3. second nested third element</p>
  </li>
  <li>third</li>
  <li>fourth</li>
</ol>

두 가지 접근 방식을 결합하면 모든 주요 브라우저에서 중첩된 정렬 목록에 순차적으로 번호가 매겨지도록 할 수 있습니다.

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