CSS 카운터를 사용하여
CSS 카운터는 "변수"와 같다. 변수 값은 (는 사용되는 횟수를 추적하는 것이다) CSS 규칙에 의해 증가 될 수있다.
CSS 카운터 작업을하려면 우리는 다음과 같은 속성을 사용합니다 :
-
counter-reset- 만들거나 카운터를 재설정 -
counter-increment- 카운터 값을 증가시킵니다 -
content- 삽입 콘텐츠를 생성 -
counter()또는counters()함수 - 요소에 카운터 값을 더한
CSS를 카운터를 사용하려면 먼저 만들어야합니다 counter-reset .
다음 예는 (신체 선택에서) 페이지에 대한 카운터를 작성하고 각각에 대한 카운터 값 증가 <h2> 요소 및 추가 "Section < value of the counter >:" 각각의 시작 부분에 <h2> 요소 :
예
body {
counter-reset: section;
}
h2::before {
counter-increment: section;
content: "Section " counter(section) ": ";
}
»그것을 자신을 시도 중첩 카운터
다음의 예는 페이지 (섹션)을위한 하나의 카운터와 각각에 대한 하나의 카운터 생성 <h1> 요소 (하위 섹션). "section" 카운터는 각각에 대해 계산됩니다 <h1> 와 요소 "Section < value of the section counter >." 및 "subsection" 카운터는 각각에 대해 계산됩니다 <h2> 와 요소 "< value of the section counter >.< value of the subsection counter >" :
예
body {
counter-reset: section;
}
h1 {
counter-reset: subsection;
}
h1::before {
counter-increment:
section;
content: "Section " counter(section) ". ";
}
h2::before {
counter-increment: subsection;
content:
counter(section) "." counter(subsection) " ";
} »그것을 자신을 시도 카운터는 카운터의 새로운 인스턴스가 자동 하위 요소로 만들어지기 때문에 설명 목록을 만들기 위해 유용하다. 여기에 우리가 사용 counters() 중첩 카운터의 다른 레벨 사이의 캐릭터 라인을 삽입하는 기능 :
예
ol {
counter-reset: section;
list-style-type: none;
}
li::before {
counter-increment: section;
content: counters(section,".") " ";
} »그것을 자신을 시도 CSS 카운터 등록
| 재산 | 기술 |
|---|---|
| content | :: 및 :: 의사 요소 후, 삽입 전에 생성 콘텐츠와 함께 사용 |
| counter-increment | 하나 이상의 카운터 값을 증분 |
| counter-reset | 작성 또는 하나 이상의 카운터를 재설정 |