Learning notes with CSS3 selector

First, the first-child and last-child selectors are easy to understand, that is, the first child element and the last child element under the parent element. Nth-child and nth-last-child are child elements of the specified sequence number under the parent element, and even the even and odd child element selection styles.

/* Example of selector writing */

Nth-child (n) // nth child element of a positive number
Nth-last-child (n) // The nth child element at the bottom
Nth-child (odd) // All the nth and even child elements in a positive number
Nth-last-child (even) // The nth child element in the reciprocal

What about nth-of-type and nth-last-of-type?

There are several articles in a div. When h2 and p are used multiple times, we need to implement parity for h2, if nth-child or nth-last-child is used for implementation, some problems will be discovered (demo code is not provided, and you can compile h2ph2ph2p by yourself ), the test result is that there is no parity color, but only an odd color.

The cause of this problem is that the nth-child selector calculates whether the child element is an odd or even element together with all the child elements in the parent element. In other words, the meaning of the "h2: nth-child (odd)" clause does not refer to the use of the odd h2 sub-element in the div element ", it is used when the odd sub-element in the div element is an h2 sub-element." (In demo, h2 and p are intertwined, and h2 is in an odd position .)

Nth-of-type and nth-last-of-type can avoid such problems. When the two selectors are used, CSS3 only calculates the child elements of the same type when calculating whether the child elements are the odd or even child elements.

/* Example of selector writing */

H2: nth-of-type (odd) // an even number of h2 subelements
H2: nth-of-type (even) // The odd h2 subelement

Added the structure pseudo-class selector list:

E: root: match the root element of E's document

E: nth-child (n): The nth child element that matches element type E and is the parent element.

E: nth-last-child (n): matches the nth child element whose element type is E and is the reciprocal of the parent element (opposite to the previous order)

E: nth-of-type (n): Child element that matches the nth type of the parent element to E

E: nth-last-of-type (n): Child element that matches the last n type of the parent element to E (opposite to the previous order)

E: first-of-type: matches the first child element of the parent element whose type is E.

E: last-child: matches the last child element of the parent element with the element type E.

E: last-of-type: matches the child element whose last type is E.

E: only-child: the matching element type is E and is the unique child element in the parent element.

E: only-of-type: Matching the Unique Child element in the parent element is the child element of E.

E: empty: matching eelements that do not contain child nodes (including text)