A detailed description of pseudo-class and pseudo-element usage in CSS

Classification and function of Pseudo-class:

Note: This table is quoted from the W3school tutorial

The classification and function of pseudo-elements:

Next, let the blogger use some vivid examples (previous assignments or small works) to illustrate the use and effects of several commonly used pseudo-classes, other readers can try themselves:

: Active

The general effect for the mouse click, the element added special effects, when the mouse release, the effect disappears. Use it on the click of the button.

Writing:

Here the ID box is a div block, in the CSS first set his basic style, the following is added: The active pseudo-class needs to modify the style.

When not clicked: after clicking:

: Active , : Hover , : Focus these common pseudo-classes are written in the same ways, and are not mentioned below. In order to visually paste a few gif, easy to understand.

As previously said: Active is often used on button clicks:

The approximate way to do this is to let the coordinates of the button move down by 1-2 pixels and reduce the outer shadow after clicking, giving the impression of a stereoscopic feeling. Of course, you can use your imagination to make the most out of your pseudo-class interactions.

: hover

When we need to change the style of an object when we hover over it, we can use : hover pseudo-class.

Here's a demonstration with a button:

When the cursor is placed on a button, the background and text color of the button is reversed and a gradient is added, which is a simple but appealing effect. Of course, you can also learn to challenge the more cool effect with continuous learning.

Here are a few more words:

: Hover 's good partner cursor property, when the property value is pointer , as above, the cursor will change to a hand when it overrides the target. The cursor also has a URL attribute, which is the set image address.

The cursor of the system becomes out of tune when you play the game with JavaScript or HTML5 later. Here you can change the cursor to the hand image you want, such as this:

The cursor property can now be placed in the global body{} or wherever you need it.

: Focus

When we need to have certain styles for the elements that have been clicked, this is used: Active is not available, because releasing the mouse style disappears. : Focus can be used on the <input> tab.

This is a simple form that has been done before:

: Focus has a different effect from the previous pseudo-class:

: First-child

Add a style to the first child element of the element, commonly used in ol,ul under the Li, or tr below the TD or th and so on.

Effect:

The places that are commonly used in practice:

On the actual authoring page, there will often be layouts like the same. Multiple images are emitted on one line, and for multiple styles similar side-by, we usually put them in the <li></li> of the list label, we can first use margin-right in Li 's style to set the spacing between Li and the distance between each graph, and then in Li 's : First-child , set the first and the left boundary by Margin-left . This adjusts the layout of the entire row of pictures or elements in a Web page.

Pseudo elements: Before and: After

The effect of both is to insert something before or after the element, note that the "before and after" here is not the front and back of the position, but the front and back of the document flow.

Usually used to do this:

This one:

And this:

Are some of the guiding small triangles or small arrows and the like.

Code:

By attaching a small icon to a div , and then setting the relevant position for the Div .

content in the contents of the Unicode geometry list, because too large is not posted here, only a small part of the display, interested friends Baidu Bar.

Of course!! The use of before and after is by no means so simple!

You can set the content property to " " andthen indulge your imagination:

This is not only used: hover, the outside of the button aperture is through: before made out.

Thank you for your visit and hope to be of help to you.