CSS3 Selector Study Notes_html/css_WEB-ITnose

First of all, let’s talk about first-child and last-child. These two selectors are easy to understand, they are the first child element and the last child element under the parent element. The nth-child and nth-last-child are the child elements with a specified serial number under the parent element, or even the even-numbered and odd-numbered child elements.

/*Selector writing example*/

nth-child(n) //Positive nth child element
nth-last-child(n) //Nth from the bottom Child element
nth-child(odd) //All even-numbered child elements counting down
nth-last-child(even) //Odd-numbered child elements counting down

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

There are several articles in one div. If h2 and p are used multiple times, odd and even colors must be implemented for h2. If you use nth-child or nth-last-child to implement it, you will find some problems ( No demo code is provided, readers can write their own h2ph2ph2p (like this). The result of the experiment is that there are no odd and even colors, only odd colors.

The reason for this problem is that when the nth-child selector calculates whether a child element is the odd-numbered element or the even-numbered element, it is calculated together with all the child elements in the parent element. In other words, the meaning of the sentence "h2:nth-child(odd)" does not mean "use it for the odd-numbered h2 child element in the div element", but means "when the odd-numbered child element in the div element is used Use it when the element is a sub-element of h2. "(In demo, h2 and p are interleaved with each other, and h2 is at an odd position.)

nth-of-type and nth-last-of-type can avoid this kind of problem occurrence. When using these two selectors, when CSS3 calculates whether a child element is an odd-numbered child element or an even-numbered child element, it only calculates child elements of the same type.

/*Selector writing example*/

h2:nth-of-type(odd) //The even-numbered h2 sub-element
h2:nth-of-type(even ) //The odd-numbered h2 sub-element

New structure pseudo-class selector list:

E:root: matches the root element of the document where E is located

E:nth -child(n): The matching element type is E and is the nth child element of the parent element

E:nth-last-child(n): The matching element type is E and is the nth child element from the last of the parent element Child elements (reverse order to the previous item)

E:nth-of-type(n): Match the nth child element of type E of the parent element

E:nth- last-of-type(n): Match the n-th child element of type E from the last of the parent element (reverse order to the previous item)

E: first-of-type: Match the n-th child element of the parent element A child element of type E

E:last-child: Matches the element type E and is the last child element of the parent element

E:last-of-type: Matches the parent The last child element of type E is

E:only-child: matches the element type E and is the only child element in the parent element

E:only-of-type: Match the only child element in the parent element that is the child element of E

E:empty: Match the E element

that does not contain child nodes (including text) from: http://www.111cn. net/cssdiv/css/47214.htm