Structural pseudo-Class selector-nth-child (n)
": Nth-child (N)" The selector is used to locate one or more specific child elements of a parent element . where "n" is its argument and can be an integer value (1,2,3,4), it can be an expression (2n+1,-n+5), and a keyword (odd, even), but the starting value of parameter n is always 1, not 0. That is, the value of the parameter n is 0 o'clock, and the selector will not select any matching elements.
Experience and Skills: When n is an expression in the ": Nth-child (N)" selector, where n is calculated starting at 0, no matching element is selected when the expression has a value of 0 or less than 0. As shown in the following table:
Case Demo
The ": Nth-child (N)" selector is used, and the parameter uses the expression "2n" to set the even-numbered row list background color to orange.
HTML code:
<ol> <li>item1</li> <li>item2</li> <li>item3</li> <li>item4</li> <li>item5</li> <li>item6</li> <li> item7</li> <li>item8</li> <li>item9</li> <li>item10</li ></ol>?
CSS code:
Ol > Li:nth-child (2n) { background:orange;}
Demo Result:
CSS3---Structural pseudo-class selector-nth-child (n)