CSS 카운터가 소수점으로 번호가 매겨진 목록을 만들 수 있나요?

소수점이 있는 번호 목록 생성

CSS를 사용하여 1.1, 1.2, 1.3과 같이 소수점이 있는 번호 목록을 생성할 수 있나요? , 단지 1, 2, 3이 아닌? list-style-type:decimal을 적용하면 후자의 시퀀스만 생성됩니다.

해결책: 카운터 활용

원하는 결과를 얻으려면 카운터를 사용할 수 있습니다.

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

이 CSS 스타일 시트는 중첩된 각 목록 항목에 소수점을 포함한 숫자를 할당합니다. 예를 들어 "1", "1.1", "1.1.1" 등입니다.

예:

<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 카운터가 소수점으로 번호가 매겨진 목록을 만들 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!