On the pseudo-class and pseudo-elements of CSS

This article shows you the pseudo-class and pseudo-elements of CSS, the introduction of a very comprehensive, recommended here for everyone to refer to.

Pseudo class

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.

Pseudo-class selector: A selector that is already defined in the CSS and cannot be named arbitrarily

: Link

Pseudo-classes will be applied to links that have not been accessed, with the: visited mutex.

: hover

The pseudo-class will be applied to the element that has the mouse pointer hovering over it.

: Active

The pseudo-class will be applied to the element being activated, such as the clicked Link, the button being pressed, and so on.

: Visited

Pseudo-classes will be applied to links that have already been visited, with: link mutex.

: Focus

The pseudo-class will be applied to the element that owns the keyboard input focus.

: First-child

The pseudo-class will be applied to the first occurrence of the element in the page.

: lang

The pseudo-class will be applied to the case with the specified lang for the element.

: Root () selector

Matches the root element of the document where element e resides. In an HTML document, the root element is always

: Not () selector

Called a negative selector, as in jquery: The not selector is exactly the same, and you can select all elements except an element.

: Empty () selector

The expression is empty. Used to select elements without any content, nothing here refers to a little bit of content, even if it is a space.

: Target () selector

Specifies a style for the page's target element (the ID of the element is used as a hyperlink in the page), which works only when the user taps a hyperlink in the page and jumps to the target element

: Nth-child ()

Select one or more specific child elements of an element.

: Nth-last-child ()

Select a specific element by starting the calculation from the last child element of a parent element.

Pseudo element

Unlike pseudo-class elements that are specific to a particular state, a pseudo-element operates on a particular content in an element that operates at a level deeper than a pseudo-class, and therefore is much less dynamic than a pseudo-class. In fact, the purpose of designing pseudo-elements is to select the first word (mother), the first line of the element content, and select the work that the ordinary selector cannot do before or after some content. The content that it controls is actually the same as the element, but it is simply an abstraction based on elements that does not exist in the document, so it is called a pseudo-element.

Pseudo-Element selectors: not selectors for real elements, but selectors for pseudo-elements already defined in CSS.

Pseudo elements in CSS we have seen before:: First-line,:first-letter,:before,:after;
Then in CSS3, he made some adjustments to the pseudo-elements, adding a ":" On the previous basis, which is now ":: First-letter,::first-line,::before,::after" And he added a ":: Selection ", two":: "and a": "CSS3 is mainly used to distinguish between pseudo-class and pseudo-elements, to this day, both methods are accepted, that is, regardless of the use of which the function is the same, but a different writing format.

: First-letter

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

: First-line

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

: Before

Adds new content to the front of the element's content.

: After

Adds new content to the last side of the element's content.

:: First-line

Select the first line of the element, such as changing the style of the first text of each paragraph, we can use this

:: Before and:: After

These two are used primarily to insert content in front or back of the element, and these two commonly used "content" mates, the most seen is the clear floating

:: Selection

Used to change the default effect of selecting Chinese on a Web page

Transfer from http://www.jb51.net/css/255744.html

On the pseudo-class and pseudo-elements of CSS