Pseudo elements and pseudo classes in our daily development, in fact, many people have used, but the interviewer really want to ask, as if it is not clear why, today specially to sum up.

A simple word: pseudo-class, is the need to add a class, to achieve the effect; A pseudo-element is something that you need to add an element to achieve.

First of all, what are pseudo classes?

Such as: hover and: active, : link, first – child: focus, and so on

The use of pseudo-classes takes :first-child as an example. If you don’t use pseudo classes, you need to add a class class to the SPAN tag to achieve the same effect.

.aa>span:first-child{
   color: darkgoldenrod;
 }
Copy the code

And then, what are pseudo-elements?

::before,::after,::first-line,::first-letter,:: Selection

Use ::first-line as an example. If you don’t use false elements, you need to add an element label to the first line of p to achieve the same effect.

p::first-line{
  color: red;
}
Copy the code

The difference between: and:

Pseudo-classes are uniformly single colons, and in CSS1 and CSS2, pseudo-elements are also single colons. But CSS3, in order to distinguish pseudo-classes from pseudo-elements, prescribes a double colon for pseudo-elements. However, for compatibility with CSS1 and CSS2, pseudo-elements can still use a single colon.

The difference between a pseudo-element and a normal element

A pseudo-element must depend on a normal element and cannot exist alone.