counter-increment自增多次 无效

Question

学习计数器遇到的问题，两天搜索找不到相关资料。问题1：HTML:texttexttextCSS: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一次不是正好
12
34
56
如果你想要每次+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);