從某blog看到一句話：

selector是基于DOM結構文檔內的靜態(tài)條件，而pseudo-class 是DOM之外的動態(tài)條件，比如 按鍵/鼠標做出動作時需要css樣式變化，就需要用pseudo-class表現.

對這段話，我一直沒啥感覺，更談不上理解，最近學偽元素，看了一個例子，突然頓悟。

例子很大，我放個鏈接
鏈接描述

就是一個統(tǒng)計復選框目前被選擇個數的問題。其中css我貼在下面：

body {
  counter-reset: icecream;
}
input:checked {
  counter-increment: icecream;
}
.total::after {
  content: counter(icecream);
}

接下來是我學習過程中遇到的問題和我自己猜想的答案，因為實在找不到解釋，于是請教

代碼執(zhí)行結果：checkbox被選中后，計數器會自動增加。很奇怪為什么計數器可以被鼠標事件所影響？這又不是js.仔細分析以下流程：

• 創(chuàng)建一個計數器 body{counter-reset: icecream;}
• input:checked{counter-increment: icecream;}定義一個偽類,此句將'checked'與'counter-increment'做了因果連接，每當input:checked被觸發(fā)（即出現一個復選框被選擇事件）都會應用一次后面的{樣式}，但此樣式并不是對目標元素的樣式渲染，它的內容是'計數器啟動'。
• .total::after {content: counter(icecream);}此句負責將計數器的結果顯示出來，且利用的是計數器每啟動一次，值會變化一次的功能。

于是得到了一個連帶因果關系：復選框被選擇——觸發(fā)計數器——計數器值增加——content顯示的值變化。

• 下面有個知識點很難理解，試著解釋，不知可否。復選框被選中會觸發(fā)'counter-increment'增量一次（此例中步長=1，也就是默認每次選中復選框，計數器+1.）這點好理解，但如果取消一個復選框，計數器結果也會減少一次,why?? 按照計數器的原理，'counter-increment'每被觸發(fā)一次皆會使最終content:counter()結果+1，而一旦觸發(fā)'結果+1'，以后不管怎樣都不會變回原來值了，除非你強行中途修改'步長=-1',讓它負增長，但這是不可能的。

那怎樣解釋：選中復選框——計數器+1；取消復選框——計數器-1 ？？

我想還是從原定義入手解釋，答案就在'pseudo-class是DOM之外的動態(tài)條件'這句話上。pseudo-class是一種獨立于DOM的動態(tài)存在，它并不改變DOM結構，它可以解釋為緩存：需要它生效，就觸發(fā)它，它就存在于緩存中了；不需要它生效，取消它，于是就在緩存中抹除它/回溯上一個動態(tài)狀態(tài)。
那么回頭來解釋本例:取消復選框相當于回溯前一個狀態(tài)（即未選中復選框時狀態(tài)），既然回到了'還沒選中復選框'的前狀態(tài)，那么計時器也就還沒被觸發(fā)，最后的計數器也就回到沒有+1的狀態(tài)。 也就是說，'取消復選框，計數器-1實質上是不存在也不可能的，實際發(fā)生的是回檔到前一個狀態(tài)而已。

以上是我自己問自己答的過程，不知道對不對，盼望高手指點~