카운터를 사용하여 CSS의 요소에 자동으로 번호를 매기는 방법은 무엇입니까? CSS 카운터 사용(코드 예)

카운터를 사용하여 CSS의 요소에 자동으로 번호를 매기는 방법은 무엇인가요? 이 글에서는 CSS 카운터를 설정하고 사용하는 방법을 소개합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

이전 글 [CSS 카운터(카운터)란 무엇인가]에서 CSS 카운터 관련 속성을 간략하게 소개했고, 코드 예시를 통해 CSS에 대해 간략하게 알아보았습니다. 이 기사에서는 CSS 카운터를 설정하고 사용하는 방법과 요소의 자동 번호 매기기를 구현하는 방법을 자세히 살펴보겠습니다. [추천 관련 비디오 튜토리얼: CSS3 tutorial]

1. CSS 카운터를 설정하고 사용하여 간단한 요소 번호 매기기

CSS 카운터를 만들고 사용하려면 다음 단계를 따르세요.

1 카운터 이름을 설정하고 다음으로 재설정하세요. 우리가 선택한 초기값. 이 작업은 counter-reset 속성을 사용하여 수행됩니다.

counter-reset:   标识符（计数器的名称）   <整数>（起始值,可选，默认值为0）;

카운터 초기화(시작값 지정)는 선택사항입니다. 정확한 값을 지정하지 않으면 0부터 시작하며 이때 카운터 구현은 '1'부터 시작됩니다.

counter-reset 속성은 번호를 매길 요소의 상위 또는 형제 요소에 설정됩니다. 예를 들어 기사의 제목에 번호를 매긴 경우 해당 제목의 상위 항목에 카운터를 설정할 수 있습니다.

article {     
/ *设置一个名为“section”的计数器，并将其初始化为0 * / 
    counter-reset：section 0 ;
}

이에 대한 이유는 번호가 매겨진 요소의 카운터를 재설정하면 동일한 번호의 요소가 나타나기 때문입니다. 이는 카운터가 초기 값으로 재설정된 다음 표시되기 전에 각 타이틀에 대해 증가하기 때문입니다.

2. 카운터가 증가하는 시기와 값을 지정합니다.

예를 들어 h2 제목이 나타날 때마다 카운터가 증가하도록 하려면 counter-increment 속성을 사용하여 이를 지정할 수 있습니다. 번호를 매길 요소가 나타날 때마다 임의의 값(이 경우 h2)만큼 카운터를 증가시키도록 선택할 수 있습니다. 기본적으로 카운터는 1씩 증가하며, 음수 값을 사용하여 카운터를 감소시킬 수도 있습니다.

h2 {     
/ *在每次出现h2时使用“section”计数器，并每次出现就增加1（默认值）* / 
    counter-increment：section 1 ;
}

여기서 주목해야 할 중요한 점은 다음과 같습니다. 을 표시하기 전에 카운터가 증가하므로 첫 번째 제목을 1부터 시작하려면 계산해야 합니다. 카운터에서 카운터 재설정 속성의 초기 값을 0으로 설정합니다.

3. 카운터 표시

카운터를 설정하고 언제, 얼마나 늘려야 하는지 지정한 후 카운터# 🎜🎜#를 표시합니다.

카운터를 표시하려면 컨텐츠 속성(또는 counters() 중첩 카운터)의 counter() 함수를 ::before 의사 요소의 값으로 사용해야 합니다.

이 예에서는 h2 제목에 번호를 매기므로 제목 앞에 카운터를 표시합니다.

h2 :: before {     
   content：counter（section）;
}

물론, 제목에 숫자를 넣고 제목 사이에 공백과 기타 구분 기호를 추가하세요. 문자열을 값으로 사용하여 counter() 함수에 구분 기호를 추가하면 됩니다. 예:

h2::before {    
 /* 在数字之后加一个点，后面加上空格 */
    content: counter(my-counter) ". "; 
}

살펴보겠습니다. 아래 예에서:

html 코드:

<h2>css计数器的使用</h2>
<p>css计数器的使用css计数器的使用css计数器的使用css计数器的使用css计数器的使用</p>
         
<h2>css计数器的使用</h2>
<p>css计数器的使用css计数器的使用css计数器的使用css计数器的使用css计数器的使用</p>

css 코드:

 body{
     counter-reset: section;
}
             
 h2:before{
     counter-increment: section;
     content: counter(section) ".";
}

Rendering: #🎜🎜 ##🎜🎜 #

2. 요소의 중첩 수를 구현하기 위해 중첩 카운터를 설정합니다. 때로는 큰 제목 아래에 여러 개의 2단계 제목과 3단계 제목이 차례로 중첩되어 있습니다(예: 아래 그림).

요소의 중첩 번호 매기기를 구현하기 위해 중첩 카운터를 사용하는 방법을 소개하겠습니다.

요소의 중첩 번호 지정을 구현하려면 가장 쉬운 방법은

counters() 함수를 사용하는 것입니다.

이 함수를 사용하면 하나의 명령문에 여러 카운터를 설정할 수 있습니다. 기본적으로 이 카운터는 중첩됩니다.

예제 소개: counters() 함수를 사용하여 중첩 목록에 중첩 카운터를 설정합니다. 목록(ul, ol)은 마크업에 여러 수준으로 중첩될 수 있으므로 counters() 함수를 사용할 수 있습니다.

html 코드:

<div class="container">
  <ul>
    <li> 菜单1
      <ul>
        <li>菜单1.1</li>
        <li>菜单1.2</li>
        <li>菜单1.3
          <ul>
            <li>菜单1.3.1</li>
            <li>菜单1.3.2</li>
            <li>菜单1.3.3</li>
            <li>菜单1.3.4</li>
          </ul>
        </li>
      </ul>
    </li>
    <li>菜单2
      <ul>
        <li>菜单2.1</li>
        <li>菜单2.2</li>
        <li>菜单2.3</li>
      </ul>
    </li>
  </ul>
</div>

css 코드:

먼저 카운터를 만들고 이름을 정의해야 합니다. 카운터는 중첩 카운터, 초기화 값: 0입니다.

ul {     
   list-style: none;/* 去除ul中默认的样式*/
   counter-reset：nested-counter;
}
ul  li {     
   counter-increment：nested-counter;
   line-height: 1.6;
}

카운터를 표시하는 것은 쉽습니다. 중첩된 카운터 사이의 구분 기호로 점을 사용하고 변경 사항에 대해서만 목록 항목의 텍스트와 카운터 사이의 구분 기호로 닫는 대괄호를 추가합니다.

ul  li ：before {     
/ * counters（）函数内的字符串是两个计数器之间的分隔符，并且函数外部的字符串是生成的数字和列表项的文本之间的分隔符* / 
     content: counters(nested-counter, ".") ") ";
     font-weight: bold;
}

효과를 얻으려면 위 그림을 참조하세요.

두 카운터 사이에는 ".", "-" 등과 같은 많은 구분 기호가 있을 수 있습니다.

3. 카운터 스타일

计数器也是可以设置样式的，不仅仅可以用数字来显示编号，还可以是字母（如a，A）,罗马字符（如：ⅰ，ⅱ）等等，只要是css list-style-type属性可用的列表样式类型中的任何一种都可以来设置计数器的样式。在之前的文章【css如何设置列表样式？列表样式的实现】中有介绍，大家可以参考一下。

那么如何设置？

这就需要设置style参数，我们来看看基本语法：

counter(name，style)
counters(name，分隔符，style)

name：计数器名称，style就是样式了。

以下是所有可能的计数器样式：

disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | lower-alpha | upper-alpha | none | inherit

总结：以上就是本篇文章的全部内容，希望能对大家的学习有所帮助。

위 내용은 카운터를 사용하여 CSS의 요소에 자동으로 번호를 매기는 방법은 무엇입니까? CSS 카운터 사용(코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!