上代码:
<!DOCTYPE html> <html> <head> <meta charset=‘UTF-8‘> <title>计数</title> <style type="text/css"> body{ counter-reset: fruit; } input:checked{ counter-increment:fruit; } .total:after{ content:counter(fruit); } </style> </head> <body> <input type="checkbox" name=‘fruit‘>水果 <input type="checkbox" name=‘fruit‘>水果 <input type="checkbox" name=‘fruit‘>水果 <input type="checkbox" name=‘fruit‘>水果 <input type="checkbox" name=‘fruit‘>水果 <input type="checkbox" name=‘fruit‘>水果 <input type="checkbox" name=‘fruit‘>水果 <input type="checkbox" name=‘fruit‘>水果 <input type="checkbox" name=‘fruit‘>水果 <p class=‘total‘></p> </body> </html>
counter-reset 属性设置某个选择器出现次数的计数器的值。默认为 0。
counter-increment 属性设置某个选取器每次出现的计数器增量。默认增量是 1。
counter()插入计数器
时间: 2024-11-07 21:09:22