CSS에서 1.1, 1.2, 1.3과 같은 번호 매기기를 사용하여 중첩된 순서 목록을 어떻게 만들 수 있나요?

중첩 번호 매기기가 포함된 순서 목록

CSS가 기본 1, 2 대신 1.1, 1.2, 1.3으로 표시되는 순서 목록 항목을 생성할 수 있나요? , 3 시퀀스?

사용하는 솔루션 카운터

이 결과를 얻으려면 CSS 카운터의 기능을 활용할 수 있습니다.

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

위 스타일 시트는 각

요소.
1. 요소는 블록으로 표시되도록 설정되고 의사 요소 :before가 각
2. 카운터 값과 마침표 및 공백을 표시합니다. 카운터 증가 속성은 각
3. element.

   예

   <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를 사용하면 이 HTML은 원하는 대로 중첩된 번호가 있는 목록 항목을 렌더링합니다.

   • 1. li 요소
     2. 1.1. 서브리 요소
     3. 1.2. 서브리 요소
     4. 1.3. 하위 li 요소
   • 2. li 요소
   • 3. li 요소
     4. 3.1 . 서브리 요소
     5. 3.2. 서브리 요소
     6. 3.3. 하위 li 요소

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