很简单的，父元素1次普照，子元素1次普照，共两次普照，counter-reset设置的计数器值增加2次，计数起始值是2，于是现实的数字就是4啦！
您可以狠狠地点击这里：counter-increment父子连续普照demo
Demo相关核心代码为：
复制代码
.counter { counter-reset: wangxiaoer 2; counter-increment: wangxiaoer; }
.counter:before { content: counter(wangxiaoer); counter-increment: wangxiaoer; }
<p class=”counter”></p> // 显示的是4
总而言之，无论位置在何方，只要有counter-increment，对应的计数器的值就会变化，counter()只是输出而已！
④ 理解了“普照规则”，则以我们通常的计数器递增效果也可以理解了。
考虑下面这两个问题：
爸爸受到普照，且重置默认值0，爸爸有2个孩子。孩子自身都没有普照。两个孩子的计数值是？爸爸没有普照，重置默认值0，爸爸有2个孩子。孩子自身都接受普照。两个孩子的计数值是？
答案是：1,1和1,2!
哦？答案居然不一样，有什么差别呢？
很简单。什么爸爸，孩子你都不要关心。只要看被普照了几次。情况1就爸爸被普照，因此，计数器增加1次，此时两个孩子的counter自然都是1; 情况2，两个孩子被普照，普照2次，第1个孩子普照之时，计数器+1，也就是1；第2个孩子普照之时再+1，于是就是2. 于是，两个孩子的counter输出就是1,2.
您可以狠狠地点击这里：兄弟递增规则演示demo
上demo对应上面的第2个问题，其结果截图如下：
核心代码如下：
复制代码
.counter { counter-reset: wangxiaoer 2; }
.counter:before,.counter:after { content: counter(wangxiaoer); counter-increment: wangxiaoer; }
<p class=”counter”></p>
计数器的数值变化遵循HTML渲染顺序，遇到一个increment计数器就变化，什么时候counter输出就输出此时的计数值。看懂了下图，您自然就会全然明白“普照规则”了。
如果上图看不明白，您可以狠狠地点击这里查看HTML与CSS源代码，感受下
increment即递增的“普照规则”。counter-increment其他设定
①
counter-reset可以一次命名两个计数器名称，
counter-increment自然有与之呼应的设定，也是名称留空就可以了。您可以狠狠地点击这里：counter-increment多名称同时应用demo
