CSS를 사용하여 사용자 정의 번호 매기기 목록(예: 1.1, 1.2, 1.3)을 어떻게 만들 수 있나요?

CSS를 사용하여 순서가 지정된 목록의 사용자 지정 번호 매기기

순서가 지정된 목록에 숫자를 1이 아닌 1.1, 1.2, 1.3으로 표시하도록 스타일을 지정할 수 있습니다. , 2, 3?

list-style-type 속성은 그렇지 않습니다. 하위 번호 매기기를 직접 제어할 수 있습니다. 그러나 CSS 카운터를 사용하는 영리한 솔루션이 있습니다.

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

이 접근 방식은 각 목록 항목에 대해 카운터를 설정하고 중첩된 항목마다 증가합니다. counters(item, ".") 함수는 점 구분 기호가 있는 숫자로 카운터 형식을 지정합니다.

설명을 위해 다음 HTML 마크업을 고려하세요.

<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. li element
    1.1. sub li element
    1.2. sub li element
    1.3. sub li element
2. li element
3. li element
    3.1. sub li element
    3.2. sub li element
    3.3. sub li element

이 기술은 순서가 지정된 목록의 번호 매기기를 사용자 정의하는 유연한 방법을 제공하여 더 복잡하고 사용자 정의 구분 기호 및 번호 매기기 체계를 갖춘 계층적 목록입니다.

위 내용은 CSS를 사용하여 사용자 정의 번호 매기기 목록(예: 1.1, 1.2, 1.3)을 어떻게 만들 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!