counter-increment自增多次 无效

Question

学习计数器遇到的问题，两天搜索找不到相关资料。

问题 1：

HTML:

<div>
    <p>text</p>
    <p>text</p>
    <p>text</p>
</div>

CSS:

div{counter-reset:pl;}
p::before{content:counter(pl);counter-increment:pl;}
p::after{content:counter(pl);}

结果：

1text1
2text2
3text3

因为教程上说不论何处，每次出现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次？于是寄希望能出现结果

2text2
3text3
4text4

可是。。。却出现这个东西。。。↓

1text2
3text4
5text6

这是什么意思？？？

---

问题2：

还是基于上题，这次我把counter-increment单独放置

div{counter-reset:pl;}
p::before{content:counter(pl);counter-increment:pl;}
p::after{content:counter(pl);}
p{counter-increment:pl;}

结果:

2text2
4text4
6text6

这个结论虽然不是我设想的，但也貌似懂了，两个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..不变了

2text2
4text4
6text6

这两天问了不少问题，有时候在想，有没有比较靠谱、深入的教程，多些例子、课后题的教程，毕竟w3c太简略了，MDN每节也只一个课后题。每次遇到点问题都来这问，挺麻烦大家的，不好意思。

Answer 1

问题1：

我不太理解你的问题，before 一次 after 一次不是正好

12
34
56

如果你想要每次 +2，应该是：

p::before {
  counter-increment:pl 2;
  content: counter(pl);
}
p::after {
  content: counter(pl);
}

问题2:

CSS 里重复多次的结果，会把所有样式合并到一起，所以重复两次和只写一次效果是一样的。

Answer 2

CSS描述的是你想要的结果（声明式），而不是你想要计算机怎么做（过程式）。所以：

1. 不论实际代码的顺序，CSS总是先处理p，再处理p::before，再处理p::after；
2. 不论实际代码的顺序，CSS总是先处理counter-increment，再处理content；
3. 声明多次同一个样式，只会处理最终生效的，丢弃其他的。

所以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);