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

HTML에서 중첩된 순서 목록에 번호 매기기

HTML에서 중첩된 순서 목록에 번호를 매기려면 CSS와 JavaScript의 조합을 사용할 수 있습니다. 이 접근 방식은 고급 CSS 속성을 지원하지 않는 브라우저를 포함하여 최신 브라우저에서 일관되게 작동합니다.

CSS 접근 방식:

1. list-style-type을 다음과 같이 설정합니다. CSS를 사용하여 기본 정렬 목록을 없음으로 설정합니다.

ol {
  list-style-type: none;
}

2. count-reset 및 counter-increment CSS 속성을 사용하여 숫자를 생성합니다. 예를 들어, 첫 번째 중첩 수준에서는 "level1"이라는 카운터를 증가시켜야 합니다.

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

3. 중첩된 순서 목록의 경우 카운터를 재설정하여 새 시퀀스를 시작합니다.

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

4. 이전에 증가된 카운터를 사용하여 중첩 목록의 숫자를 생성합니다.

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

jQuery 접근 방식(IE6/7 지원):

1. 중첩된 목록 요소를 스타일을 적용하려면:

$('ol ol').each(function(i, ol) {
  ol = $(ol);
  ol.children('li').each(function(i, li) {
    li = $(li);
    li.prepend('<span>' + level2 + '</span>');
  });
});

2. 원하는 번호 매기기 형식을 제공하는 요소:

ol li span {
  margin: 0 5px 0 -25px;
}

이러한 CSS와 JavaScript 기술을 결합하면 HTML에서 중첩된 순서 목록에 효과적으로 번호를 매길 수 있어 주요 브라우저에서 일관된 형식을 보장할 수 있습니다.

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