The difference between pseudo-class and pseudo-element

Definition of the standard:
CSS introduces the concept of pseudo-classes and pseudo-elements in order to implement formatting based on information outside of the document tree.
Pseudo-classes are:: First-child,: Link:,vistited,:hover,:active,:focus,:lang pseudo-elements are:: First-line,:first-letter,:before,:after

The difference between pseudo-class and pseudo-element
Let's look at a pseudo-element first-line example. Now there is a piece of HTML, the content is a paragraph:
<p>i am The bone of my sword.  Steel is my body, and the fire is my blood. I have created over a thoustand blades.
Unknown to Death.nor known to life.  There are withstood pain to create many weapon. Yet, those hands would never hold anything. So as I pray, unlimited blade works. </p>

What would I do if I wanted to describe the first line of the paragraph, without pseudo-elements? Want to think I must nest a layer of span, and then add the class name:
<p><span class= "First-line" >i am the bone of my sword. Steel is my body, and the fire is my blood. </span>
I have created over a thoustand blades.
Unknown to Death.nor known to life.  There are withstood pain to create many weapon. Yet, those hands would never hold anything. So as I pray, unlimited blade works. </p>

Another example of pseudo-class First-child has a simple list: <ul> <li></li> <li></li> </ul> If I want to describe the first element of UL, I don't need to nest new elements, I just need to add a class name to the first existing Li:
<ul> <li class= "First-child" ></li> <li></li> </ul>
Although the first and first elements are similar in semantics, the final effect is completely different. So the fundamental difference between pseudo-classes and pseudo-elements is whether they create new elements (abstractions). From the point of view of our imitation, if we need to add a new element to identify, it is pseudo-element, conversely, if you only need to add categories to the existing elements, is pseudo-class. And that's why the standard uses the word "create" precisely to explain pseudo-elements, and uses the term "classify" to explain the cause of the pseudo-class. One describes the newly created "Ghost" element, and the other describes an existing element that matches the "phantom" category.
The pseudo-class is simply used to represent the dynamic state of some elements, typically the various states of a link (LVHA). The CSS2 standard then expands its conceptual scope to make it a "ghost" category that is logically present but not necessarily identified in the document tree.
Pseudo-elements represent the child elements of an element that, while logically present, do not actually exist in the document tree.

Wk_ad_begin ({pid:21}); Wk_ad_after (, function () {$ ('. Ad-hidden '). Hide ();}, function () {$ ('. Ad-hidden '). Show ();});

The origin of pseudo-class and pseudo-element confusion
Most confusing, perhaps most people will: before and: pseudo-elements such as after are called pseudo-classes, and even in the case of conceptual confusion, the actual use of no problem-because even if the concept of confusion, the real use will not cause much trouble:)
CSS Selector Level 3 in order to distinguish between the two confusion, and deliberately separated by a colon:
? A pseudo-class is represented by a colon: first-child
? Pseudo-elements are represented by two colons:: First-line
Also, the browser is compatible with the single-colon representation of both CSS1 and the existing pseudo-elements in 2, and also incompatible with the single-colon representation of the newly introduced pseudo-element CSS3. Later, as we all know, because the low version of IE on the double colon compatibility problem, almost all of the csser in the writing style when the same use of a single colon. This virtually, let this confusion continue down. and CSS3 the use of new pseudo-elements so far, is far from struggling.

Pseudo-class and pseudo-elements need to be noted in the use of the place
After understanding the difference, we need to pay attention to and consider some problems in actual use. For example: How to calculate the selectors particularity (priority) of pseudo-class and pseudo-elements?
I was in the previous CSS selector distance irrelevant article, the translation of the CSS standard calculation selector of the particularity of this part, after reading that part, the answer is clear: in addition to the negation of the special provisions of pseudo-class, separate as the real class and the element calculation.
Although a later version of the standard may allow the selection of multiple pseudo-elements, the pseudo-elements can only appear once in a selector and only appear at the end of the day. In fact, a pseudo-element is an actual, but nonexistent, part of the logic that selects an element, so no one in the application will mistakenly write it as multiple. Pseudo-classes, like real classes, play the role of classes, with no quantitative limitations, as long as they are not mutually exclusive pseudo-classes, but can also be used on the same elements. For a detailed explanation of the CSS3 selector, the Rogerjohansson CSS 3 selectors explained is recommended.

The difference between pseudo-class and pseudo-element