CSS 카운터

css 카운터는 css3이며 최신 브라우저에서만 유효합니다.
counter-reset: 특정 선택기의 발생 횟수에 대한 카운터 값을 설정합니다. 기본값은 0입니다. 카운터를 정의하면 초기 값을 정의할 수 있습니다. 기본값은 0

counter-increment: 선택기가 나타날 때마다 카운터 증분 을 설정합니다. 기본 증분은 1입니다.

데모

css 구현 횟수 및

css

 body{
            margin: 0;
            counter-reset: increment;
        }
        input{
            border: none;
            margin: 0;
            padding: 0;
        }
        .number1 input[type=checkbox]:checked{
            counter-increment:increment 20;
        }
        .number2 input[type=checkbox]:checked{
            counter-increment:increment 30;
        }
        .number3 input[type=checkbox]:checked{
            counter-increment:increment 40;
        }
        .number4 input[type=checkbox]:checked{
             counter-increment:increment 50;
         }
        .number5 input[type=checkbox]:checked{
            counter-increment:increment 60;
        }
        .sum:after{
            content: counter(increment);

        }

html

<label class="number1"><input type="checkbox">20</label>+<label class="number2"><input type="checkbox">30</label>+<label class="number3"><input type="checkbox">40</label>+<label class="number4"><input type="checkbox">50</label>+<label class="number5"><input type="checkbox">60</label>=<p class="sum"></p>

CSS 카운터와 관련된 더 많은 글은 PHP 중국어 홈페이지를 주목해주세요!