counter-increment自增多次 无效

Question

学习计数器遇到的问题，两天搜索找不到相关资料。
问题1：
HTML:
text
text
text
CSS:
div{counter-reset:pl;}
p::before{content:counter(pl);counter-increment:pl;}
p::after{content:counter(pl);}
结果：
1text12text23text3
因为教程上说不论何处，每次出现counter-increment计数器皆自增,于是修改CSS为：
div{counter-reset:pl;}
p::before{content:counter(pl);counter-increment:pl;}
p::after{content:counter(pl);counter-increment:pl;}
两个counter-increment是不是计数器自增2次？于是寄希望能出现结果
2text23text34text4
可是。。。却出现这个东西。。。↓
1text23text45text6
这是什么意思？？？
问题2：
还是基于上题，这次我把counter-increment单独放置
div{counter-reset:pl;}
p::before{content:counter(pl);counter-increment:pl;}
p::after{content:counter(pl);}
p{counter-increment:pl;}
结果:
2text24text46text6
这个结论虽然不是我设想的，但也貌似懂了，两个counter-increment的语义是：计数器自增步长=2。于是从0初始，2,4,6...
原谅我整天胡思乱想，于是又加一个counter-increment会出现什么？
div{counter-reset:pl;}
p::before{content:counter(pl);counter-increment:pl;}
p::after{content:counter(pl);}
p{counter-increment:pl;}
p{counter-increment:pl;}
是不是步长=3，于是出现3,6,9...可我又被耍了结果无任何变化,不论我加入多少个counter-increment,可结果固定在2,4,6..不变了
2text24text46text6
这两天问了不少问题，有时候在想，有没有比较靠谱、深入的教程，多些例子、课后题的教程，毕竟w3c太简略了，MDN每节也只一个课后题。每次遇到点问题都来这问，挺麻烦大家的，不好意思。

Answer 1

问题1：我不太理解你的问题，before一次after一次不是正好123456如果你想要每次+2，应该是：p::before{counter-increment:pl2;content:counter(pl);}p::after{content:counter(pl);}问题2:CSS里重复多次的结果，会把所有样式合并到一起，所以重复两次和只写一次效果是一样的。

Answer 2

CSS描述的是你想要的结果（声明式），而不是你想要计算机怎么做（过程式）。所以：不论实际代码的顺序，CSS总是先处理p，再处理p::before，再处理p::after；不论实际代码的顺序，CSS总是先处理counter-increment，再处理content；声明多次同一个样式，只会处理最终生效的，丢弃其他的。所以CSS处理问题1的顺序是(p::before)counter-increment:pl;(p::before)content:counter(pl);(p::after)counter-increment:pl;(p::after)content:counter(pl);处理问题2.1的顺序是(p)counter-increment:pl;(p::before)counter-increment:pl;(p::before)content:counter(pl);(p::after)content:counter(pl);处理问题2.2的顺序是计算p的最终生效样式：第二个p有counter-increment，丢弃第一个p的counter-increment(最终生效的p)counter-increment:pl;(p::before)counter-increment:pl;(p::before)content:counter(pl);(p::after)content:counter(pl);