CSS`Counter-Reset '및'Counter-Increment '속성을 설명하십시오

CSS의 카운터 레즈 세트 및 카운터 증가는 HTML 요소를 자동으로 번호 번호로 번호를 매기는 데 사용됩니다. 1. 카운터 레셋을 사용하여 카운터를 초기화하거나 재설정하십시오 (예 : 섹션 {Coun 2. 각 H3 제목 번호를 증가시키기 위해 h3 {카운터-증가 : 하위 섹션;}와 같은 카운터 증가를 통해 카운터를 증가시킵니다. 3. 컨텐츠 속성을 사용하여 h3 :: 이전 {content : counter (section) "과 같은 의사 요소와 함께 카운터를 표시하십시오." 중첩 된 숫자를 구현하려면 카운터 (하위 섹션);}. 이러한 기능은 제목 번호의 자동 생성, 사용자 정의 목록 스타일, 다단계 번호 및 UI 진행 표시기와 같은 시나리오에 적합하며 JavaScript없이 복잡한 레이아웃 로직을 완료 할 수 있습니다.

CSS 만 사용하여 HTML의 제목 번호, 목록 항목 또는 섹션을 자동으로 구매하려는 경우 counter-reset 및 counter-increment 필요한 도구입니다. 이러한 속성을 사용하면 스타일 시트에서 카운터를 직접 만들고 조작 할 수 있습니다.

CSS의 카운터는 무엇입니까?

핵심에서 CSS 카운터는 브라우저에서 유지 관리하는 변수로 증가하여 표시 할 수 있습니다. 번호가 매겨진 제목, 순서 목록 또는 다단계 번호 (1.1, 1.2, 2.1 등)와 같은 것들에 특히 유용합니다.

JavaScript의 변수처럼 선언하지 않습니다. 대신, 당신은 counter-reset 으로 그들을 "초기화"하고 counter-increment 로 그들을 "업데이트"합니다.

counter-reset 사용 방법

counter-reset 속성은 새 카운터를 생성하거나 기존 카운터를 특정 값으로 재설정하는 데 사용됩니다 (기본값은 0).

예를 들어:

 부분 {
  카운터 리셋 : 하위 섹션;
}

이것은 sub-section 이라는 카운터를 생성하고 새 section 시작될 때마다 재설정됩니다. 이는 중첩 번호에 적합합니다.

다른 숫자로 시작하도록 설정할 수도 있습니다.

 부분 {
  카운터 셋 : 하위 섹션 5;
}

이제이 section 내부의 첫 번째 sub-section 6에서 시작됩니다 ( counter-increment 일반적으로 기본적으로 1을 추가하기 때문에).

명심해야 할 몇 가지 사항 :

• 카운터는 그들이 정의한 요소와 그 어린이들에게 경계됩니다.
• 하나의 선언에서 여러 카운터를 정의 할 수 있습니다.

   카운터 리셋 : 섹션 0 하위 섹션 0;

counter-increment 사용하는 방법

카운터가 존재하면 counter-increment 사용하여 그 가치를 높입니다 . 이것은 일반적으로 구독이나 목록 항목과 같은 숫자 변경을 트리거 해야하는 요소에 적용됩니다.

예:

 H3 {
  반격 : 하위 섹션;
}

sub-section 카운터가있는 부모 내부에 h3 나타날 때마다 카운터가 1만큼 증가합니다.

counter-reset 과 마찬가지로 한 번에 여러 카운터를 증가시킬 수 있습니다.

 H2 {
  카운터 증가 : 섹션 서브 섹션 2;
}

여기서 section 1 씩 증가하고 sub-section 2 증가합니다.

중요한 참고 : 기본적으로, counter-increment 달리 지정되지 않는 한 1만큼 증가합니다.

content 가있는 카운터 표시

카운터를 작성하고 업데이트하는 것만으로는 충분하지 않습니다. 또한 표시해야합니다. 그곳에서 content 속성이 들어오는 곳은 ::before 과 ::after 자주 사용됩니다.

예:

 H3 :: 이전 {
  내용 : "섹션"카운터 (하위 섹션) ":";
}

이것은 각 h3 전에 "섹션 2 :"와 같은 것을 나타냅니다.

중첩 카운터 (챕터 및 구독 등)의 경우 다음을 수행 할 수 있습니다.

 H3 :: 이전 {
  내용 : 카운터 (섹션) "." 카운터 (하위 섹션) "";
}

이는 각 카운터가 재설정되고 증가한 횟수에 따라 "2.1", "2.2"등과 같은 출력을 제공합니다.

일반적인 사용 사례

이러한 속성이 빛나는 몇 가지 실용적인 시나리오는 다음과 같습니다.

• 자동 수정 제목 : 문서 사이트 또는 장식 컨텐츠에 적합합니다.
• 사용자 정의 목록 스타일 : <ol></ol> 에 의존하지 않고 고유 한 주문 목록을 작성할 수 있습니다.
• 다단계 카운터 : 1.1, 1.2, 2.1 등과 같은 기술 사양 또는 법률 문서에 적합합니다.
• 시각적 지표 : 카운터는 UI 구성 요소에서 시각적으로 진행 상황을 추적하는 데 도움이 될 수 있습니다.

그냥 기억하십시오 :

• 사용하기 전에 항상 카운터를 재설정하십시오.
• 필요할 때만 증가하십시오.
• content 으로 표시하는 것을 잊지 마십시오.

그것은 기본적으로 counter-reset 과 counter-increment 작동하는 방식입니다. 처음에는 약간 추상적 인 것처럼 보일지 모르지만, 일단 범위와 둥지를 끊으면 레이아웃 로직을위한 강력한 도구가됩니다.

위 내용은 CSS`Counter-Reset '및'Counter-Increment '속성을 설명하십시오의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!