A summary of the difference between pseudo-class and pseudo-elements in CSS,CSS3

In the process of learning CSS, it is particularly easy to confuse the two concepts: pseudo-class and pseudo-elements。 The definitions of the two are as follows: CSS pseudo-classes are used to add special effects to certain selectors. CSS Pseudo-elements are used to add special effects to certain selectors. 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. Let's talk about the difference between a pseudo-class and a pseudo-element in CSS and CSS3.

You can learn the free course of the PHP Chinese web first

1. CSS3 pseudo-class selector course in CSS3 from beginner to Mastery Tutorial

2. Video tutorial on pseudo-class and pseudo-elements in Dark Horse Programmer's CSS video tutorial

The difference between pseudo-class and pseudo-element

1. The difference between pseudo-class and pseudo-elements in CSS3 and the matters needing attention

The standard in CSS3 is that a pseudo-class uses a single colon ":" while a pseudo-element uses a double-colon "::" (avoids confusion) but before this, either pseudo-class or pseudo-element uses a single colon ":" so that it is possible to use both the pseudo-element-compatible method.
However, the low version of IE has double colon compatibility problem, so people who have written styles for pseudo-classes and pseudo-elements simply use a single colon, resulting in this confusion has continued.

2. The difference between a CSS pseudo-class and a pseudo-element

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. 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.

3. The pseudo-class and pseudo-elements in CSS and the difference between the two descriptions

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. Link is used on the connection for access. The visited is used on connections that have already been visited. The hover is used for the connection on which the mouse cursor is placed. Active is used to get the focus (for example, clicked) on the connection.

4. Examples of pseudo-elements in CSS and their differences from pseudo-classes

We know that as the CSS specification is further improved, there are more and more new CSS artifacts, but in the daily development, we commonly used and browser support situation is more optimistic when the number of before and after. But we use it in our daily development: after {content: ";} To clear the float, and add an element (take care of the IE8 browser here using a single colon). But what are the desirable values of content?

5. CSS common attributes pseudo-elements and pseudo-elements summary

The pseudo-class is initially used to represent the dynamic state of some elements, typically the various states of the links (link, active, hover, visited) that are commonly used, and then the CSS2 standard
Extends its conceptual scope to a "ghost" classification that is logically present but is not identified in the document tree.

Pseudo-elements represent the child elements of an element that, although logically present, do not actually exist in the document tree, such as after, before, etc., which we normally use.

6. On the pseudo-class and pseudo-elements of CSS

The pseudo-class selection element is based on the state in which the current element is present, or the attributes that the element currently has, not the static flags of the element's ID, class, attributes, and so on. Because the state is dynamically changing, when an element reaches a certain state, it may get a pseudo-class style, and when the state changes, it loses the style. As you can see, its function is somewhat similar to class, but it is based on abstractions outside of the document, so it is called a pseudo class.

Related questions

1. What is the difference between pseudo-class and pseudo-elements?

"Recommended"

1. PHP Chinese Web free video tutorial: "Php.cn lonely Nine Cheap (2)-css video Tutorial"

2. PHP Chinese Web Free Tutorial: CSS 3.0 Reference Manual