深刻理解僞類'動態’特性

從某blog看到一句話：

selector是基於DOM結構文檔內的靜態條件，而pseudo-class 是DOM以外的動態條件，好比 按鍵/鼠標作出動做時須要css樣式變化，就須要用pseudo-class表現.

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

▲ CSS ：

body {
  counter-reset: icecream;
}
input:checked {
  counter-increment: icecream;
}
.total::after {
  content: counter(icecream);
}
#  E:checked{ sRules }匹配用戶界面上處於選中狀態的元素E。

▲ HTML ：

<strong>下面中國十大冰淇淋你吃過幾個？</strong>
<ol>
    <li><input type="checkbox" id="icecream1"><label for="icecream1">哈根達斯</label></li>
    <li><input type="checkbox" id="icecream2"><label for="icecream2">和路雪wall's</label></li>
    <li><input type="checkbox" id="icecream3"><label for="icecream3">八喜冰淇淋</label></li>
    <li><input type="checkbox" id="icecream4"><label for="icecream4">DQ冰淇淋</label></li>
    <li><input type="checkbox" id="icecream5"><label for="icecream5">蒙牛冰淇淋</label></li>
    <li><input type="checkbox" id="icecream6"><label for="icecream6">雀巢冰淇淋</label></li>
    <li><input type="checkbox" id="icecream7"><label for="icecream7">伊利冰淇淋</label></li>    
    <li><input type="checkbox" id="icecream8"><label for="icecream8">樂可可冰淇淋</label></li>
    <li><input type="checkbox" id="icecream9"><label for="icecream9">新城市冰淇淋</label></li>
    <li><input type="checkbox" id="icecream10"><label for="icecream10">明治MEIJI</label></li>
</ol>
你總共選擇了 <strong class="total"></strong> 款冰淇淋！

執行結果：checkbox被選中後，計數器會自動增長。很奇怪爲何計數器能夠被鼠標事件所影響？這又不是js.仔細分析如下流程：

• 建立一個計數器 body{counter-reset: icecream;}
• input:checked{counter-increment: icecream;}定義一個僞類,此句將'checked'與'counter-increment'作了因果鏈接，每當input:checked被觸發（即出現一個複選框被選擇事件）都會應用一次後面的{樣式}，但此樣式並非對目標元素的樣式渲染，它的內容是'計數器啓動'。

• .total::after {content: counter(icecream);}此句負責將計數器的結果顯示出來，且利用的是計數器每啓動一次，值會變化一次的功能。

  因而獲得了一個連帶因果關係：複選框被選擇——觸發計數器——計數器值增長——content顯示的值變化。

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

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

  我想仍是從原定義入手解釋，答案就在'pseudo-class是DOM以外的動態條件'這句話上。pseudo-class是一種獨立於DOM的動態存在，它並不改變DOM結構，它能夠解釋爲緩存：須要它生效，就觸發它，它就存在於緩存中了；不須要它生效，取消它，因而就在緩存中抹除它/回溯上一個動態狀態。
  那麼回頭來解釋本例:取消複選框至關於回溯前一個狀態（即未選中複選框時狀態），既然回到了'還沒選中複選框'的前狀態，那麼計時器也就還沒被觸發，最後的計數器也就回到沒有+1的狀態。 也就是說，'取消複選框，計數器-1實質上是不存在也不可能的，實際發生的是回檔到前一個狀態而已。