CSS3: nth-child () pseudo class selector

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 in CSS3.": Nth-child ()".

Syntax:

:nth-child(an+b)

Why choose her? I think this selector is the most learned one. Unfortunately, according to my tests, only Opera9 + and Safari3 + are supported. A front-end UI framework that can improve development efficiency by 500%!

Description:

Pseudo class: Nth-child ()The parameter is an + B. If you write Chinese characters according to the description on w3.org, it may make people dizzy. In addition, the author's 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 3rd LI backgrounds to orange */

Method 2: Write 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 .) A front-end UI framework that can improve development efficiency by 500%!

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: Nth-child (an + 1)Similarly, they all match 1st, but the difference is that they are calculated in reverse mode, and the number starts from the first B, so the maximum number of matching B is not 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. */a front-end UI framework that can improve development efficiency by 500%!

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.