A description of the difference between pseudo-and pseudo-elements in CSS

This article mainly introduces the details of the pseudo-class and pseudo-elements in the CSS and the difference between the two, in fact, CSS3 in the specification of a simple rough method, that is, pseudo-class with a colon before the pseudo-element is represented by two colons, so it is not easy to confuse, the need for friends to refer to the next

The concept and function of CSS pseudo-class
A CSS pseudo-class (pseudoclasses) is a bolt of a selector used to specify the state of one or its associated selectors. They are in the form selector:pseudoclass{property:value;}, simply use a half-width colon (:) to separate the selectors from the pseudo-class.
CSS Many suggestions are not supported by the browser, but there are four safe to use in connection with the CSS pseudo-class.
1.link is used on the connection for access.
2.visited is used on connections that have already been visited.
3.hover is used for the connection on which the mouse cursor is placed.
4.active is used to get the focus (for example, clicked) on the connection.
For example:

Examplesourcecode   a:link{     color:red}     a:visited{     color:green}     a:hover{     color:blue}     a:active{     Color:orange     }

Attention:
Although CSS gives you the control to bypass, it's a good practice to use different colors to indicate which connections you've already visited, because many users still expect it. CSS pseudo-class (except hover) is not commonly used, I am afraid not used in the past. So it's not as useful as it used to be. But if you can collect comments from users, you will find that you should use it.
Traditionally, the connection text is blue, and the connection that has been visited is purple. Perhaps, this is the most effective and most useful color. However, with the extensive development of CSS, this color will not be normal, users no longer assume that the connection must be blue or purple.
You should also be able to use the hover pseudo-class on other elements except the connection. Unfortunately, Internetexplore does not support it. This is really a great annoyance.

Pseudo element
In fact, the pseudo-elements in CSS do not exist on the HTML, the use of the time is usually for a particular element of the special handling of the use of the
Common pseudo-element:
:: First-line
You can specify the style of the first line of the P element
:: First-letter
You can specify the style of the first word of the P element
:: Selection
Define the effect of the consumer's anti-white
:: Before
Inserting content before an element
:: After
Inserting content after an element
Sample HTML

<p>    Chen Liang, late Emperor Creative not half <br>    every day, when the day was light, my mother woke me up and told me to sit up in the clothes. I never knew how long she had been awake.   </p>

First-line and First-letter

/* First line type */p::first-line {       color:red;   }   /* Start the first character type */p::first-letter {       font-size:30px;   }   Selection   //anti-white effect   p::selection {       background:red;       Color: #FFF;   }   Firefox   p::-moz-selection {       background:red;       Color: #FFF;   }

The difference between pseudo-class and pseudo-elements:
First, read the definition of the two:
1.CSS pseudo-classes are used to add special effects to certain selectors.
2.CSS pseudo-elements are used to add special effects to certain selectors.
Can be clear two points, the first two are related to selectors, the second is to add some "special" effect. The special point here is that they describe things that other CSS cannot describe.
Pseudo-Class types

Pseudo element Kind

Difference
Here are the pseudo-classes: first-child and pseudo-elements: first-letter for comparison.

P>i:first-child {color:red}   <p>       <i>first</i>       <i>second</i>   </p>

Pseudo-Class: First-child adds a style to the first child element
If we do not use pseudo-classes and want to achieve the above effects, we can do this:

. first-child {color:red}   <p>       <i class= "First-child" >first</i>       <i>second</ I>   </p>

That is, we add a class to the first child element and then define the style of the class. So let's take a look at the element:

P:first-letter {color:red}   <p>i am Stephen Lee.</p>

Pseudo element: First-letter add style to first letter
So if we do not use pseudo-elements, to achieve the above effect, what should be done?

. first-letter {color:red}   <p><span class= ' first-letter ' >I</span> am Stephen Lee.</p>

That is, we add a span to the first letter and then add a style to span.
The difference between the two has come out. That is:

The effect of a pseudo-class can be achieved by adding an actual class, while the effect of the pseudo-element needs to be achieved by adding an actual element, which is why they are called pseudo-classes, a pseudo-element.

Summarize
Pseudo-elements and pseudo-classes are so easily confused because they are similar in effect, but in fact CSS3 the pseudo-class is represented by a colon in order to differentiate between them, while pseudo-elements are represented by two colons.

:P seudo-classes   ::P seudo-elements

But because of the compatibility problem, so now most of the unified single colon, but aside from the problem of compatibility, we should try to develop good habits when writing, to distinguish between the two.