CSS 카운터는 중첩된 순서 목록에서 어떻게 소수점 번호 매기기를 생성할 수 있습니까?

CSS를 사용하여 소수점 번호 매기기가 포함된 중첩 순서 목록 만들기

순서 목록은 일반적으로 1, 2, 3과 같은 숫자를 순차적으로 표시합니다. 그러나 CSS를 사용하여 1.1, 1.2, 1.3 등과 같은 보다 구체적인 번호 매기기를 어떻게 생성할 수 있습니까?

list-style-type:decimal만 사용하면 기본 숫자 값만 생성됩니다. 원하는 계층적 번호 매기기를 생성하기 위해 카운터를 사용할 수 있습니다.

다음 코드 조각은 카운터 사용 방법을 보여줍니다.

OL { counter-reset: item }
LI { display: block }
LI:before { content: counters(item, ".") " "; counter-increment: item }

예는 다음과 같습니다.

<ol>
  <li>li element
    <ol>
      <li>sub li element</li>
      <li>sub li element</li>
      <li>sub li element</li>
    </ol>
  </li>
  <li>li element</li>
  <li>li element
    <ol>
      <li>sub li element</li>
      <li>sub li element</li>
      <li>sub li element</li>
    </ol>
  </li>
</ol>

이 CSS를 적용하면 결과 순서 목록에 1.1, 1.1.1, 1.2, 1.3 등은 목록 요소의 중첩된 계층 구조를 나타냅니다.

위 내용은 CSS 카운터는 중첩된 순서 목록에서 어떻게 소수점 번호 매기기를 생성할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!