집 > 기사 > 웹 프론트엔드 > CSS 카운터 자세히 살펴보기

CSS 카운터 자세히 살펴보기

王林앞으로: 2020-10-21 17:21:252473검색

CSS 카운터 자세히 살펴보기

CSS 카운터 효과는 CSS 코드를 사용하여 요소 수가 증가하면 값도 증가하는 효과를 의미합니다.

CSS 카운터에는 두 가지 속성(counter-reset 및 counter-increment)과 한 가지 메소드(counter() / counters())가 있으며 이에 대한 설명은 다음과 같습니다.

1 . counter-reset

counter-reset 속성은 이름에서 알 수 있듯이 카운터 재설정을 의미합니다. 실제로 주요 기능은 카운터에 이름을 지정하는 것입니다. 기본값은 0입니다. 기본값은 1 대신 0입니다. 인터넷에서 기본적으로 표시되는 첫 번째 숫자가 0이 아닌 1인 많은 예를 볼 수 있습니다. 이는 역증분의 영향 때문입니다. 나중에 자세히 설명하겠습니다

먼저 간단한 예를 살펴보겠습니다.

<div>下面将出现的数字</div>
<div class="counter"></div>

.counter {
    counter-reset: resetname 2;
    font-size: 24px;
    color: #f66;
}
.counter:before {
    content: counter(resetname);
}

CSS 카운터 자세히 살펴보기

conter-reset 후 2를 제거하면 아래에 나타나는 숫자는 0

counter-reset의 카운트 재설정이 가능합니다. -2와 같은 복소수 또는 2.99와 같은 십진수일 수 있습니다. 그러나 IE나 FireFox 모두 이를 인식하지 못하고 잘못된 값으로 간주하여 0으로 처리합니다. Chrome에서는 모든 소수점은 반내림됩니다. 2.99로 처리되므로 여기서 멈출 것이라고 생각하셨습니다. 물론 그렇지 않습니다! 카운터 재설정에는 동시에 여러 카운터의 이름을 지정하는 또 다른 트릭이 있습니다.

    .counter {
        counter-reset: first 2 second 3;
        font-size: 24px;
        color: #f66;
    }
    .counter:before {
        content: counter(first);
    }
    .counter:after {
        content: counter(second);
    }

CSS 카운터 자세히 살펴보기 In 또한, 카운터 재설정을 없음으로 설정하고 상속을 통해 재설정을 취소하고 재설정을 상속할 수도 있습니다.

2.counter-increment

속성 카운터 증가는 이름에서 알 수 있듯이 카운터 증가를 의미합니다. 각 카운트의 변경 값을 나타내는 숫자가 뒤에 올 수 있는 하나 이상의 counter-reset 키워드입니다. 생략된 경우 기본 변경 값은 1입니다.

CSS 카운터 기술에는 이를 호출하는 고유한 규칙 세트가 있습니다. 특히 카운터 재설정은 고유하며 카운터 증가는 한 번 사용됩니다. 카운트를 한 번 늘리면

위에서 언급한 "기본값 0" 문제를 해결할 수 있습니다. 반드시 카운터 증가를 사용해야 합니다. 그렇지 않으면 증가하는 방법입니다.

.counter {
    counter-reset: incerment 2;
    counter-increment: incerment;
    font-size: 24px;
    color: #f66;
}
.counter:before {
    content: counter(incerment);
}

CSS 카운터 자세히 살펴보기 이 Puzhao 요소는 요소에 직접 쓸 수도 있으며 효과는 위와 동일하며 1씩 증가합니다. 상위 요소와 하위 요소가 모두 작성되면 상위 요소는 한 번 증가하고 하위 요소는 한 번 증가하며 최종 결과는 두 배만큼 증가합니다

앞서 언급한 것처럼 이 변경 값이 반드시 필요한 것은 아닙니다. 항상 1이며 유연하게 설정할 수 있습니다. 예를 들어

counter-increment: incerment 2;

의 변경 값은 다음과 같이 음수일 수도 있습니다.

.counter {
    counter-reset: incerment 5;
    counter-increment: incerment -2;
    font-size: 24px;
    color: #f66;
}
.counter:before {
    content: counter(incerment);
}

CSS 카운터 자세히 살펴보기 값은 없음일 수도 있고 상속받을 수도 있습니다

3. counter()/ counters()

이 두 가지는 속성이 아닌 메서드입니다. CSS3의 calc()와 유사합니다. 여기서 기능은 개수를 표시하는 것이지만, counter(name) 위에서 사용된 것과 같은 여러 이름과 사용법이 있습니다

카운트를 표시하는 것입니다

counter(이름, 스타일)로도 쓸 수 있습니다

그럼 이 스타일은 무엇일까요? 지원하는 키워드는 list-style-type에서 지원하는 키워드이고 그 기능은 우리의 것입니다. 반드시 숫자일 필요는 없으며, 영문자나 다른 문자도 가능합니다.

카운터의 기본 사용법

.counter {
    counter-reset: styleType 2;
    font-size: 24px;
    color: #f66;
}
.counter:before {
    counter-increment: styleType;
    content: counter(styleType, lower-roman);
}

CSS 카운터 자세히 살펴보기 아래의 전체 데모와 동일합니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>content</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        ul, li {
            list-style: none;
        }
        .reset { 
            padding-left: 20px; 
            counter-reset: fe;
        }
        .counter:before { 
            content: counters(fe, &#39;.&#39;) &#39;. &#39;; 
            counter-increment: fe;
        }
    </style>
</head>
<body>
<div class="reset">
    <div class="counter">前端开发FE
        <div class="reset">
            <div class="counter">前端开发FE111</div>
            <div class="counter">前端开发FE222
                <div class="reset">
                    <div class="counter">前端开发FEsss</div>
                    <div class="counter">前端开发FE</div>
                    <div class="counter">前端开发FE</div>
                </div>
            </div>
            <div class="counter">前端开发FE3333</div>
        </div>
    </div>
    <div class="counter">后端开发</div>
    <div class="counter">PM
        <div class="reset">
            <div class="counter">瞎提需求</div>
        </div>
    </div>
</div>
</body>
</html>

CSS 카운터 자세히 살펴보기

CSS 카운터 자세히 살펴보기

관련 기사