CSS3 selector for web front-end use

First of all, First-child and Last-child, these two selectors are easy to understand, which is the first child element and the last child element under the parent element. The Nth-child and Nth-last-child are the child elements of the specified ordinal under the parent element, or even the design of the selected style of the odd number of sub-elements.

 / * Selector example * / nth-child (n)//positive number nth child element nth-last-child (n)//countdown nth child element Nth-child (odd)//positive down all the sub-elements of an even number Nth-last-child (even)//number of odd sub-elements on the countdown What about Nth-of-type and Nth-last-of-type?  in a div there are several articles, H2 and P multiple use of the situation to achieve parity H2, if the use of Nth-child or nth-last-child to implement will find some problems (do not provide demo code, the reader can write their own h2ph2ph2p so), The result of the experiment was that there was no odd-even color, just an odd number of discoloration.  The reason for this problem is that the Nth-child selector is calculated along with all child elements in the parent element when it calculates whether the child element is an odd number or an even number of elements. In other words, the meaning of the phrase "h2:nth-child (odd)" does not mean "to use" for the odd number of H2 child elements in a DIV element, but to "use when the odd number of sub-elements in a DIV element is a H2 child element." (The demo words h2,p each other, the H2 are in odd positions.) ) Nth-of-type and Nth-last-of-type can avoid the occurrence of such problems. When using these two selectors, the CSS3 is calculated only for the same type of child elements when calculating whether the child element is an odd number or an even number of sub-elements.  / * Selector example * / H2:nth-of-type (odd)//H2 sub-element of an even number H2:nth-of-type (even)//odd number of H2 child elements new structure Pseudo-class selector list: E:root: Matches the root element of the document where E is located e:nth-child (N): matches the element type 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 reciprocal nth child element of the parent element (as opposed to the previous order) E:nth-of-type (n): A child element of the nth type E that matches the parent element E:nth-last-of-type (N): matches a child element of the parent element's reciprocal nth type E (as opposed to the previous order) E:first-of-type: A child element that matches the first type of the parent element to E e:last-child: Match element type E and is the last child element of the parent element E:last-of-type: A child element that matches the last type of the parent element, E e:only-child: Match element type E and is the only child element in the parent element E:only-of-type: The child element that matches the unique child element in the parent element is E e:empty: Matches E elements that do not contain child nodes (including text)

CSS3 selector for web front-end use