CSS pseudo-class and pseudo-element--pseudo

Summary in front:

0. References

1. Pseudo-class and pseudo-elements are two different kinds of things.

2. Pseudo-class and pseudo-elements belong to CSS selectors.

3. CSS introduces pseudo-classes and pseudo-elements to implement information that is based outside of the document tree, i.e. the first line of the paragraph, formatted.

4. Both pseudo-and pseudo-elements are not present in the source file and in the document tree.

Pseudo-Class: The first is only used to represent the dynamic state of some elements, typically <a> LVHA four states, the CSS2 standard extends the concept scope, making it all logically exist, but not necessarily identified in the document tree classification.

Pseudo-element: represents the child element of an element, although this child element exists logically, but does not exist in the document tree.

5. A colon is used in CSS3 to differentiate between the two, but it is not fully implemented and is currently a single colon:

--pseudo-class with a colon : First-child

--pseudo element with two colons :: First-line

A little more on:

Resources

In CSS, the class selector can be considered a pattern in the regular, Div.value is equivalent to Div[class~=value] , and the style in the CSS is usually attached to the position of an element in the document tree, This model is sufficient for most situations, but some common typographic states cannot be applied to the structure of the document tree, such as First-line, where there is no simple CSS selector to apply to it, and it is also dynamically changing.

Pseudo-Class: Pseudo-Class partitioning of elements is based on features rather than on their names, attributes, or content, which in principle is not inferred from the document tree (how is it implemented?). ）。  Pseudo-classes can be dynamic, and an element can get or lose a pseudo-class when the user interacts with the document. : First-child and : lang Some cases can be inferred with the document tree, which is an exception. Pseudo-classes are:: first-child,: Link,: vistited,: hover:, Active:focus,: lang

Pseudo-elements: Create abstractions about document languages that can be developed beyond the document tree. For example, a document language cannot provide a mechanism to access the first letter or first line of an element's content, and a pseudo-element can do it.  Pseudo-elements are returned to the content assignment style that does not exist in the source file, i.e. : Before and : after

Pseudo-classes can assign styles independently of the elements of a document, and can be assigned to any element (the most common is a element, or it can be applied to other elements such as Li ), logically and functionally similar to the class (i.e. all have a matching effect), but it is predefined, Does not exist in the document tree and is expressed differently, so it is called a pseudo-class.

The content controlled by the pseudo-element is the same as the content controlled by an element, but the pseudo-element is not a true element and does not exist in the document tree (which can be added dynamically to the document), not the actual element.

CSS pseudo-class and pseudo-element--pseudo