In this regard, I will give a general introduction to the usage of Nth-child () in css3:
Css3 pseudo-class selector: Nth-child ()
Briefly summarize several Nth-child () usage.
First, Nth-child (number) directly matches the number element. The number must be an integer greater than 0.
(EG) Li: Nth-child (3) {Background: orange;}/* set the 3rd Li backgrounds to orange */
Second: Nth-child (an) matches all elements whose multiples are. The letter N in the parameter "an" cannot be the default value. It is a symbol of the method of writing multiples, such as 3N and 5N.
(EG) Li: Nth-child (3N) {Background: orange;}/* Set 3rd, 6th, 9th ,... The background of Li in multiples of all 3 is set to orange */
third: Nth-child (An + B) and: Nth-child (an-B) group Elements first. Each group has a, and B is the serial number of the members in the group. letters N and plus signs + cannot be defaulted, and positions cannot be changed. This is a mark of this writing method, where A and B are positive integers or 0. Such as 3N + 1 and 5N + 1. But the plus sign can be changed to a minus sign, which matches the-B number in the group. (In fact, an can also be a negative number, but it is left for the next part .)
(EG) Li: Nth-child (3N + 1) {Background: orange;}/* match 1st, 4th, 7th ,..., Each 3 is a group of 1st li */
Li: Nth-child (3N + 5) {Background: orange ;} /* match 5th, 8th, 11th ,..., Starting from 5th, each 3 is a group of 1st li */
Li: Nth-child (5n-1) {Background: orange ;} /* match 5th-1 = 4, 10th-1 = 9 ,..., Multiples of 5th minus 1 li */
Li: Nth-child (3N ± 0) {Background: orange;}/* equivalent to (3N) */
Li: Nth-child (± 0n + 3) {Background: orange;}/* equivalent to (3) */
Fourth: nth-child (-An + B) is negative and positive. The default value cannot be set. Otherwise, it is meaningless. In this case, it is similar to Nth-child (An + 1). It matches 1st, but the difference is that it calculates backwards, starting from the second, therefore, it cannot match more than B.
(EG) Li: Nth-child (-3N + 8) {Background: orange;}/* match 8th, 5th, and 2nd li */
Li: nth-child (-1N + 8) {Background: orange;}/* or (-N + 8), matching the first 8 (including 8th) Li, this is a more practical point. It is used to limit the first n matches. */
Fifth, Nth-child (ODD) and: Nth-child (even) match the elements with odd numbers and even numbers respectively. The odd (ODD) and (2n + 1) results are the same; The even (even) and (2n + 0) and (2n) results are the same.
This method can be used in jquery to achieve the stripe effect:
$ ("Table TR: Nth-child (even)"). addclass ("striped ");
The even parameter can be changed to another parameter. The five situations described above can be changed.
The addclass ("striped") striped following is a CSS class name.
By the way, I learned some selectors in CSS.
Hope to stick to it.