CSS pseudo elements and pseudo-class-tolerance

CSS-pseudo-element and pseudo-class-tolerance pseudo-class and pseudo-element pseudo-class: occupies,: link in special characteristics

Add a special style to an unaccessed link. That is to say, the URI referred to by the link does not appear in the history of the user agent. This status is mutually exclusive with the visited status.

: Visited

Add a style for the accessed link.

: Hover

Apply a style to the link when the mouse is hovering

: Foucs

Apply a style to the mouse-focused Link

: Active

Add a special style to the element that is active (events that occur between mouse clicks and release.

The preceding pseudo classes must be written in sequence !!

: Nth-child (n)

Match the child element whose index is n from the parent element and set the style. n starts from 1 and nth-child (1) is the same as first-child.

    
        
p1
        
p2
        span1        span2    

P: nth-child (1) is the first p element applied Style

P span: nth-child (1) does not match any element, so that span is the third child element of p.

: Nth-of-type (n)

Match nth-of-type (1) with first-of-type from the parent Element

P: nth-of-type (1) is the p1 application Style

P span: nth-of-type (1) is the span1 application style.

: Target

When the uri involved is used, apply the style to the specified element.

: Empty

Select an element without child elements (including text nodes.

: Root

Select the first element in the Document Tree and specify the html element permanently in the html root, mainly to increase the weight.

: Not

E: not (F) {}, select all elements except F in parent Element E to apply the style.

: Checked

Select the selected element application style, which is mostly used for single-choice form, check box.

: Disabled/: enable

Select the apply style of the element to which the input is prohibited or allowed. It is mostly used in input.

Pseudo element: All pseudo elements must be placed after all selectors, and their particularity is 0, 0, 1: first-letter.

Set initial Style

: First-line

Set the first line style

: Before

E: before {content: ""; color: red ;}

Add a row element before the Eelement. Its content is content. You can set the style by yourself.

: After

Opposite to: before