Shulou(Shulou.com)05/31 Report--

This article mainly explains "what pseudo-classes and pseudo-elements are there in CSS". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn what pseudo-classes and pseudo-elements CSS has.

Pseudo class

Pseudo-class selection elements are based on the current state of the element, or the current characteristics of the element, rather than static flags such as id, class, attributes, and so on. Because the state is dynamic, when an element reaches a particular state, it may get the style of a pseudo class; when the state changes, it loses that style. As you can see, its function is similar to that of class, but it is based on an abstraction outside of the document, so it is called a pseudo-class.

Pseudo-class selector: a selector that has been defined in CSS and cannot be named casually.

: link

Pseudo classes will be applied to links that have not been accessed, mutually exclusive with: visited.

: hover

Pseudo-classes will be applied to elements that have a mouse pointer over them.

: active

Pseudo classes will be applied to activated elements, such as clicked links, pressed buttons, and so on.

: visited

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

: focus

Pseudo classes will be applied to elements that have keyboard input focus.

: first-child

Pseudo-classes will be applied when the element first appears on the page.

: lang

The pseudo class will be applied if the element has the specified lang.

Root () selector

Matches the root element of the document where element E is located. In HTML documents, the root element is always. The ": root" selector is equivalent to an element

Not () selector

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

Empty () selector

It means empty. Used to select elements without any content, which means that there is no content at all, even a space.

Target () selector

Specify a style for a target element on the page whose id is used as a hyperlink in the page, which works only after the user clicks on 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 ()

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

Pseudo element

Unlike pseudo-class elements that aim at a special state, pseudo-elements operate on specific content in the element, and they operate at a deeper level than pseudo-classes, so they are much less dynamic than pseudo-classes. In fact, the purpose of designing pseudo-elements is to select the first word (letter) and the first line of the content of the element, and to select tasks that cannot be done by ordinary selectors such as before or after the content. The content it controls is actually the same as the element, but it is only an abstraction based on the element and does not exist in the document, so it is called pseudo-element.

Pseudo-element selector: this is not a selector for real elements, but a selector for pseudo-elements that are already defined in CSS.

Pseudo elements in CSS have been seen before:: first-line,:first-letter,:before,:after

Well, in CSS3, he has made some adjustments to pseudo elements, adding a ":" that is, now it has become ":: first-letter,::first-line,::before,::after". In addition, he has also added a ":: selection", two "::" and "one": "css3 is mainly used to distinguish between pseudo-classes and pseudo-elements. So far, both methods are accepted. That is to say, no matter which method of writing is used, the effect is the same, but a writing format is different.

: first-letter

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

: first-line

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

: before

Add new content to the front of the element content.

: after

Add new content at the end of the element content.

:: first-line

We can use this by selecting the first line of the element, such as changing the style of the first line of text in each paragraph

: before and:: after

These two are mainly used to insert content into the front or back of the element. These two commonly used "content" are used together, and the most common thing you have seen is to clear floats.

:: selection

It is used to change the default effect of selecting Chinese when browsing the web.

At this point, I believe you have a deeper understanding of "what pseudo-classes and pseudo-elements CSS has". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.