Pseudo and pseudo elements, pseudo elements

Pseudo and pseudo elements, pseudo elements
Pseudo class

Pseudo-class selection elements are based on the status of the current element, or the current characteristics of the element, rather than static flags such as the element id, class, and attribute. Because the state changes dynamically, when an element reaches a specific State, it may get a pseudo-class style. When the state changes, it will lose this style. It can be seen that its functions are similar to those of the class, but it is based on abstraction outside the document, so it is called a pseudo class.

Pseudo-class selector: A defined selector in CSS.

: Link

The pseudo class will be applied to links that have not been accessed and are mutually exclusive with: visited.

: Hover

The pseudo class will be applied to elements with mouse pointer hovering over it.

: Active

The pseudo class will be applied to activated elements, such as the clicked link and the pressed button.

: Visited

The pseudo-class will be applied to the accessed link, and will not be the same as: link.

: Focus

The pseudo class will be applied to elements with keyboard input focus.

: First-child

The pseudo class will be applied to the first time an element appears on the page.

: Lang

The pseudo-class is applied when the element carries the specified lang.

: Root () Selector

Matching Element E is the root element of the document. In the HTML document, the root element is always

: Not ()Selector

The negative selector is exactly the same as the: not selector in jQuery. You can select all elements except an element.

: Empty () Selector

It indicates null. It is used to select elements without any content. Here there is no content, even a space.

: Target () Selector

Specify a style for a target element on the page (the id of this element is used as a hyperlink in the page). This style takes effect only after the user clicks the hyperlink on the page and jumps to the target element.

: Nth-child ()

Select one or more specific child elements of an element.

: Nth-last-child ()

It starts from the last child element of a parent element to select a specific element.

Pseudo element

Unlike the pseudo-class elements for special states, the pseudo-element operates on the specific content of the element. It operates at a deeper level than the pseudo-class, therefore, its dynamic nature is much lower than that of pseudo classes. In fact, the purpose of designing pseudo elements is to select the first word (mother) and first line of the element content, and select the work that cannot be completed by a common selector such as the front or back of some content. The content it controls is actually the same as the element, but it is only based on the element abstraction and does not exist in the document, so it is called a pseudo element.

Pseudo-element selector: it is not used for real elements, but for pseudo elements defined in CSS.

The pseudo elements in CSS have been viewed before: first-line,: first-letter,: before,: after;
In CSS3, he made some adjustments to the pseudo elements and added a ":", which is now changed to ": first-letter ,:: first-line,: before,: after. In addition, he adds ": selection", two ":", and one ": "css3 is mainly used to distinguish between pseudo classes and pseudo elements. Up to now, both methods are accepted. That is to say, no matter which method is used, they play the same role, it's just a different writing format.

: First-letter

The pseudo-element style is applied to the first word (mother) of the element text ).

: First-line

The pseudo-element style is applied to the first line of the element text.

: Before

Add new content at the beginning of the element content.

: After

Add new content at the end of the element content.

: First-line

Select the first line of the element. For example, to change the text style of the first line of each paragraph, we can use this

: Before AND: after

These two are mainly used to insert content to the front or back of the element. These two commonly used "content" are used together. The most common thing we have ever seen is to clear the floating

: Selection

It is used to change the default Effect of Selecting Chinese characters on Web pages.