Pseudo-element selectors and pseudo-class selectors of CSS3

The pseudo-class selector , unlike the element style in the general DOM, does not alter any DOM content. Just a few elements of the decorated class are inserted, which are visible to the user, but not visible to the DOM. The effect of a pseudo-class can be achieved by adding an actual class.

A:link|a:visited|a:hover|a:active

In the CSS definition, a:hover must be placed a:link and a:visited after, is valid, a:active must be placed a:hover after, is valid.

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.

: The focus/* pseudo-class will be applied to elements that have keyboard input focus. The */:first-child/* pseudo-class will be applied to the first occurrence of the element in the page. The */:lang/* pseudo-class is applied to the case with the specified lang for the element. */

pseudo-Element selectors , the effects of pseudo-elements are required to be achieved by adding an actual element.

/* Use a style for the first line of text for an element. */:first-line/* uses styles for the first or first word of text in an element. */:first-letter/* inserts some content before an element. */:before/* inserts some content after an element. */:after

Structural pseudo-Class selectors

: root () selector, literally we can clearly understand is the root selector, he means to match the element E is located in the document root element. In an HTML document, the root element is always

: The Not () selector, called the negative selector, is exactly the same as the: not selector in jquery, and you can select all elements except an element.

: The empty () selector represents null. Used to select elements without any content, nothing here refers to a little bit of content, even if it is a space.

: the 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 the hyperlink in the page and jumps to the target element.

: the First-child () selector represents the element e that selects the first child element of a parent element. The simple point of understanding is to select the first child element in the element, remembering that it is a child element, not a descendant element.

: Nth-child () selects one or more specific child elements of an element.

<! DOCTYPE html>

: Nth-last-child () selects a specific element, starting with the last child element of a parent element.
<! DOCTYPE html>
: the Nth-of-type (n) selector and the: Nth-child (n) selector are very similar, except that it calculates only the child elements of one of the types specified in the parent element. When a child element in an element is not just a child of the same type, it is convenient and useful to use the: Nth-of-type (n) selector to locate a child element of some type in the parent element.
: Only-child represents that an element is the only child element of its parent element.
Pseudo-Elements in CSS3
CSS3 has made some adjustments to the pseudo-elements, adding one on the previous basis:
Which is now:: First-letter,::first-line,::before,::after
There is also an additional:: Selection
In CSS3, the pseudo-class is explicitly represented by a colon, while the pseudo-element is represented by two colons.
::first-lineSelect the first line of the element, such as changing the style of the first text of each paragraph, we can use this
::beforeAnd ::after These two are mainly used to give elements of the front or back of the content, the two commonly used "content" in conjunction with the most seen is to clear the floating
<! DOCTYPE html>
::selectionUsed to change the default effect of selecting Chinese on a Web page
UI State element Pseudo class Selector
E:checked{attribute} matches all selected elements in the user interface (Form form)
E:enabled{attribute} matches all elements in the user interface (form form) that are in the available state
E:disabled{attribute} matches all elements in the user interface (form form) that are in an unavailable state
E::selection{attribute} matches the part of the element that is selected by the user or is in a highlighted state
Target Pseudo-Class
E:target{attribute} matches the element pointed to by the related URL
Pseudo-element selectors and pseudo-class selectors of CSS3