The fundamental difference between pseudo-classes and pseudo-elements lies in whether they create new elements.
Pseudo-element/Pseudo-object: It is a virtual element that does not exist in the DOM document, and is to create a new element. Represents a child element of an element. Although this child element exists logically, it does not actually exist in the document tree.
Pseudo-element selector
Pseudo-category: The "ghost" category that exists in the DOM document and logically but does not need to be identified in the document tree.
Pseudo-class selector Let's
take a look at the description of the two applications in W3C:
Pseudo-class: used to add special effects to some selectors.
Pseudo-element: used to add special effects to some selectors.
In fact, the basic meaning is to supplement those elements that cannot be selected by class, id, etc.
For example,
if we want the font color of the first p tag to turn red, how to do it is very simple to use pseudo-classes:
But what do we do if we don't use pseudo-classes? At this time, we need to add a class class to the first p tag
to achieve the same effect, but we need to write one more class
How can the above operations be achieved if pseudo elements are used?
What can we do if we don't use pseudo-elements?
It can be seen that the two are different.
The effect of pseudo-classes can be achieved by adding actual classes. The effect of
pseudo-elements can be achieved by adding actual elements.
So their essential difference is whether they create new elements abstractly.
Note:
Pseudo-classes can only use ":"
and pseudo-elements can use either ":" or "::".
Because pseudo-classes are similar to adding classes, there can be multiple ones, and pseudo -elements can only be used in a selector. Can appear once, and only at the end
Related issues
: after / :: after and: before / :: before the similarities and differences
similarities
Both can be used to represent pseudo-class objects, used to set the content
before the object : before and ::before are equivalent; :after and ::after are equivalent.
Differences
:before/:after is the way of writing Css2, ::before/::after is the way of writing Css3
: before/:after is more compatible than ::before/::after,
but it is recommended to use ::before in H5 development /::after is better
Note:
Pseudo-objects should be used in conjunction with the content attribute.
Pseudo-objects will not appear in the DOM, so they cannot be operated by js. They are just added in the CSS rendering layer
. The special effects of pseudo-objects usually use the :hover pseudo-type style to activate
eg: when the mouse moves When on the span, insert "duang" before the span
