css计数器使用

counter-reset属性用于重置计数器，用法：计数器名字 初始值 计数器名字 初始值 ...可重复写多组
counter-increment属性用于设置计数器步增，用法：计数器名字 步增数（默认1） ...可重复写多组
counter方法，counter(计数器名字, 样式属性名)
counters方法，counters(计数器名字，'任意拼接字符串', 样式属性名)
mdn文档

css

ol {
  list-style: lower-roman;
  counter-reset: liCount;
}
li::before {
  content: counters(liCount, '-');
  counter-increment: liCount;
}

html

<ol>
    <li></li>
    <li></li>
    <li>
        <ol>
            <li>
                <ol>
                    <li></li>
                    <li></li>
                    <li></li>
                </ol>
            </li>
            <li></li>
            <li></li>
            <li></li>
        </ol>
    </li>
    <li></li>
</ol>

计算选中的checkbox

ul {
    list-style: decimal;
    counter-reset: checkcount 0;
}
ul::after {
    content: '已选中' counter(checkcount) '个';
}
ul li input:checked {
    counter-increment: checkcount;
}

计算选中的checkbox

<ul>
    <li>
        <label for="count1">
            <input type="checkbox" name="count" id="count1" />
            A
        </label>
    </li>
    <li>
        <label for="count2">
            <input type="checkbox" name="count" id="count2" />
            B
        </label>
    </li>
    <li>
        <label for="count3">
            <input type="checkbox" name="count" id="count3" />
            C
        </label>
    </li>
</ul>