利用CSS计数函数counter()实现计数

要实现li列表计数比较简单，直接设置list-style-type即可，但是要实现非li列表计数该怎么办呢，counter()可以轻松实现

CSS代码
 1  /*插入计数器，第一个计数器从0开始累加，第二个计数器从1开始累加 ---不写数字默认是0*/
 2 body{counter-reset:section 0 subsec 1;}
 3 .box > p:before{
 4     content:counter(section)"、 "; /*获取计数器*/　    
 5     counter-increment: section; /*对计数器进行累加*/
 6 }
 7 .demo > p:before{
 8     content:counter(subsec)"、 "; 
 9     counter-increment: subsec;
10 }

HTML代码

 1 <div class="box">
 2     <p>【八项规定后茅台酒公务消费由30%下降到1% 官员曾用矿泉水瓶装酒】反腐纪录片《永远在路上》今天播出第三集。原来公务消费占到茅台酒销量的30%以上，如今已经不到1%。<br>天津市医药集团原党委书记张建津：你在桌上摆个瓶子被拍照了，那网上不就有证据了吗，所以就把茅台酒就倒在矿泉水瓶里边，分酒的时候再倒着喝</p>
 3     <p>【八项规定后茅台酒公务消费由30%下降到1% 官员曾用矿泉水瓶装酒】反腐纪录片《永远在路上》今天播出第三集。原来公务消费占到茅台酒销量的30%以上，如今已经不到1%。<br>天津市医药集团原党委书记张建津：你在桌上摆个瓶子被拍照了，那网上不就有证据了吗，所以就把茅台酒就倒在矿泉水瓶里边，分酒的时候再倒着喝</p>
 4     <p>【八项规定后茅台酒公务消费由30%下降到1% 官员曾用矿泉水瓶装酒】反腐纪录片《永远在路上》今天播出第三集。原来公务消费占到茅台酒销量的30%以上，如今已经不到1%。<br>天津市医药集团原党委书记张建津：你在桌上摆个瓶子被拍照了，那网上不就有证据了吗，所以就把茅台酒就倒在矿泉水瓶里边，分酒的时候再倒着喝</p>
 5 </div>
 6 <div class="demo">
 7     <p>【新华社：剪除楼市毒瘤刻不容缓】当前，房地产市场秩序已经到了非整治不可的地步。必须清醒地认识到，在中国很多家庭是拿出几辈人的积蓄买房，房地产市场秩序事关百姓<br>切身利益，房地产市场的平稳健康发展事关我国经济社会发展大局，中国容不下一个百病缠身的房地产市场。</p>
 8     <p>【新华社：剪除楼市毒瘤刻不容缓】当前，房地产市场秩序已经到了非整治不可的地步。必须清醒地认识到，在中国很多家庭是拿出几辈人的积蓄买房，房地产市场秩序事关百姓<br>切身利益，房地产市场的平稳健康发展事关我国经济社会发展大局，中国容不下一个百病缠身的房地产市场。</p>
 9     <p>【新华社：剪除楼市毒瘤刻不容缓】当前，房地产市场秩序已经到了非整治不可的地步。必须清醒地认识到，在中国很多家庭是拿出几辈人的积蓄买房，房地产市场秩序事关百姓<br>切身利益，房地产市场的平稳健康发展事关我国经济社会发展大局，中国容不下一个百病缠身的房地产市场。</p>
10 </div>

 

结果如下图所示：

 

 

posted @ 2019-04-12 20:07  lcspring  阅读(290)  评论(0)  编辑  收藏  举报