see a sentence from a blog:

selectorDOMpseudo-class DOM /csspseudo-class.

I have never felt much about this passage, let alone understand it. Recently, I learned pseudo-elements and read an example and suddenly had an epiphany.

example is very large. I put a link
link description

is a question of counting the number of check boxes currently selected. Among them, css I posted below:

   

 next are the problems I encountered in the course of learning and the answers I guessed, because I really couldn"t find an explanation, so I asked 
 Code execution result: when checkbox is selected, the counter is automatically incremented. It"s strange why counters can be affected by mouse events. This is not js.. Carefully analyze the following process: 

 create a counter body {counter-reset: icecream;} 
 input:checked {counter-increment: icecream;} defines a pseudo class. This sentence connects  "checked"  with " counter-increment" . Every time  input:checked  is triggered (that is, a check box is selected), the following {style} is applied, but this style is not a style rendering of the  target element , its content is" counter starts ". 

 .total:: after {content: counter (icecream);}  this sentence is responsible for displaying the results of the counter, and takes advantage of the function that the value changes  each time the  counter is started. 


 then you get a joint cause and effect: the check box is selected-- the trigger counter-- the counter value increases-- the change in the value shown by content. 
 
 there is a knowledge point that is difficult to understand. Try to explain it. I don"t know if it is possible. Selecting the check box will trigger the "counter-increment" increment once (in this case, step = 1, that is, the default check box is selected each time, counter + 1.) this is understandable, but if  cancels a check box, the counter result will also be reduced once , why?? According to the principle of the counter, every time "counter-increment" is triggered, the final content:counter () result will be + 1, and once the trigger " result + 1", it will not change back to the original value no matter what, unless you force the "step =-1" to make it  negative growth , but this is impossible. 
 
 how do you explain that: select the check box-counter + 1; uncheck the check box-counter-1? 
 I"d like to start with the original definition, and the answer lies in the sentence "pseudo-class is a dynamic condition other than DOM".  pseudo-class  is a dynamic existence independent of DOM, it does not change the DOM structure, it can be interpreted as cache: if you need it to take effect, trigger it, and it exists in the cache; you don"t need it to take effect, cancel it, and then erase it / backtrack the last dynamic state in the cache. 
 then come back to explain this example: unchecking the check box is equivalent to going back to the previous state (that is, the state when the check box is not selected). Since you have returned to the previous state of "not yet selected check box", then the timer has not been triggered, and the final counter will return to the state where there is no + 1. In other words,  "cancels the check box, counter-1  is essentially non-existent and impossible, what actually happens is a rollback to the previous state. 
  the above is the process of asking myself to answer . I don"t know if it"s right. I hope the master will give me some advice.