CSS의 의사 요소는 실제로 사용하기 매우 쉽지만 모든 사람이 간과하는 경우가 많습니다. 이제 많은 사람들은 의사 요소에서 일반적으로 사용되는 content 속성의 값이 문자열 외에 문자열만 지원한다고 생각할 수도 있습니다. 그 밖에 일반적으로 사용되는 콘텐츠 속성으로는 uri와 counter가 있습니다. 오늘 소개하고 싶은 것은 conter(카운터)입니다.
CSS의 카운터는 간단한 계산 기능을 구현하고 결과를 페이지에 표시할 수 있는 변수와 유사합니다. 카운터를 구현하려면 다음 속성을 사용해야 합니다.
CSS에서 카운터가 어떻게 사용되는지 살펴보겠습니다.
1. 자동 번호 매기기를 위해 카운터를 사용하세요
CSS 카운터는 규칙에 따라 변수를 증가시킵니다.
CSS 카운터는 다음 속성을 사용합니다.
(1) counter-reset:name1 name2는 카운터를 생성하거나 재설정합니다(여러 카운터를 공백으로 구분하여 동시에 정의할 수 있음).
(2) 카운터 증가: 이름 단계 증가 변수(하나 이상 증가 가능)
(3) content:counter(name) 생성된 콘텐츠를 삽입합니다(전/후 의사 요소 사용).
(4) counter() 또는 counters() 함수는 요소에 카운터 값을 추가합니다.
카운터를 생성할 때 이전 태그 또는 해당 태그의 상위 태그에서 생성되어야 합니다. 자체 태그에 정의된 경우 무효화됩니다.
특정 애플리케이션:
<!DOCTYPEhtml><html><head><metacharset=UTF-8><title>Dotcpp 프로그래밍</title><style>div{counter-reset:counter1;}h2{counter-reset:counter2;}h2:: before{/*단계 크기를 먼저 설정하세요*/counter-increment:counter11;content:'th'counter(count er1)'section';}p::before{/*단계 크기를 먼저 설정하세요*/counter-increment:counter21;content:''counter(counter1)' 섹션';}</style></he 광고><body><div><h2></h2><p></p><p></p><p></p><h2></h2><p></p> <p></p><p></p><p></p></div></body></html>실행 결과:
2. 카운터 초기화
카운터를 사용하려면 먼저 counter-reset 속성을 사용하여 카운터를 생성해야 합니다. 이 프로세스를 카운터 초기화라고 합니다. counter-reset 속성의 구문 형식은 다음과 같습니다.
카운터 재설정: 없음|[<식별자><정수>]
매개변수 설명은 다음과 같습니다:
(1) 없음: 카운터 재설정을 방지합니다.
(2) <식별자>: 카운터의 이름을 정의합니다.
(3) <integer>: 카운터의 시작 값을 정의합니다. 기본값은 0이며 음수일 수 있습니다.
3. 카운터가 자동으로 증가합니다.
카운터를 초기화한 후 counter-increment 속성을 사용하여 카운터가 증가하는 시기를 지정할 수 있습니다. 구문은 다음과 같습니다.
카운터 증가: 없음|[<식별자><정수>]
매개변수 설명은 다음과 같습니다:
(1) 없음: 카운터가 증가하는 것을 방지합니다.
(2) <식별자>: 증가할 카운터의 이름을 정의합니다.
(3) <integer> : 카운터가 매번 증가하는 값을 정의합니다. 기본값은 1이며 음수일 수 있습니다.
4. 디스플레이 카운터
마지막으로 카운터를 표시하는 방법입니다. 카운터를 표시하려면 counter() 또는 counters() 함수를 사용할 수 있습니다. 이 두 함수의 구문은 다음과 같습니다.
카운터(이름)카운터(이름,문자열,목록 스타일 유형)
매개변수 설명은 다음과 같습니다:
(1) 이름: 카운터의 이름
(2) 문자열: 카운터가 중첩되어 사용될 때 접합에 사용되는 문자열입니다.
(3) list-style-type: 카운터에 의해 표시되는 스타일은 CSS에서 허용되는 "list-style-type 속성"의 값일 수 있습니다.
다음은 간단한 예를 사용하여 카운터 사용을 보여줍니다.
<!DOCTYPEhtml><html><head><style>body{counter-reset:chapter;}h5,h6{margin:5px05px;}h5{counter-reset:section;counter-increment:chapter;}h6{counter- 증분:섹션;}h5:before{content:Chaptercounter(장).; }h6:before{content:counter(chapter).counter(section);}</style></head><body><h5>1장</h5><h6>섹션 1</h6>< h6> 아니요. 섹션 2</h6><h6>섹션 3</h6><h6>섹션 4</h6><h5>챕터 2</h5><h6>섹션 1</h6><h6>챕터 2</h6> h6><h6>섹션 3</h6><h6>섹션 4</h6></body></html>실행 결과:
5. 카운터 중첩
또한 카운터는 중첩될 수도 있으며 counters() 함수를 사용하여 다음 예제와 같이 서로 다른 수준의 중첩 카운터 사이에 문자열을 삽입할 수 있습니다.
<!DOCTYPEhtml><html><head><style>ol{/*각 ol 요소에 대한 새 카운터 인스턴스 생성*/counter-reset:ol-list;list-style-type:none;}li:before{ / *카운터의 현재 인스턴스만 증가*/counter-increment:ol-list;/*모든 카운터 인스턴스에 대해 "."로 구분된 값 증가*/content:counters(ol-list,.),;} < /style></head><body><ol><li>볼륨</li><li>챕터<ol><li>섹션</li><li>섹션</li><li>섹션<ol ><li>섹션</li><li>섹션</li></ol></l i><li>섹션<ol><li>하위 섹션</li><li>하위 섹션</li><li>하위 섹션</li></ol></li></ol></li>< li>장</li><li>장</li></ol></body></html>실행 결과:
