: Nth-child () pseudo class selector

The power of css3 is amazing, and people have to feel pity for its difficult path. Good standards can only be regarded as "standard" if they receive good support from industry browsers ". Css3 standards have been proposed for several years, but currently there are not many browsers that can implement her. Although some browsers can implement some standards, what is the use of such standards? In the face of more compatibility issues, csser can only sigh. Even so, how can we stop looking forward? Today, let's look forward to a pseudo class selector ": Nth-child ()" In css3 ()". Syntax: Why does Nth-child (An + B) select her, because I think this selector is the most learned one. Unfortunately, according to my tests, only opera9 + and safari3 + are supported. Description: pseudo class: The Nth-child () parameter is an + B. If you write Chinese characters according to the description on w3.org, it is very likely to make people dizzy, in addition, the author's level of writing is limited, so I decided to avoid the argument of an + B and split it into five types of writing. A total of five parts are explained. First: write a simple number: Nth-child (number) directly matches the number element. The number must be an integer greater than 0. Example: Li: Nth-child (3) {Background: orange;}/* set the background of the first Li to orange */Method 2: multiples: 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. Example: Li: Nth-child (3N) {Background: orange;}/* put 3rd, 6th, 9th ,... The background of Li in multiples of all three is set to orange */3: group matching in multiples: 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 .) Example: Li: Nth-child (3N + 1) {Background: orange;}/* matches 1st, 4th, 7th ,..., Each 3 is a group of 1st li */Li: Nth-child (3N + 5) {Background: orange;}/* matches 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 type: reverse multiple group match: Nth-child (-An + B) here, the negative and positive values cannot be set by default. 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. Example: 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. */V: parity: Nth-child (ODD) and: Nth-child (even) match the elements with odd and even numbers. The odd (ODD) and (2n + 1) results are the same; The even (even) and (2n + 0) and (2n) results are the same.