CSS3: 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 it is written in Chinese according to the description on w3.org, It is very dizzy. In addition, the level of writing is limited, so I decided to avoid the statement of an + B and split it into five types of writing, which are described in five parts.

First: simple number Writing
: Nth-child (number)

Directly match 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 ()

Match 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;}/* Set 3rd, 6th, 9th ,... Set the background of LI in multiples of all 3 to orange */

Third: Multiple group matching
: 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;}/* 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 ,... , A multiple 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 )*/

Type 4: reverse multiple group matching
: 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 */

Fifth: parity matching
: 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.