Css3:nth-child () Pseudo class selector

CSS3 's strong, amazing, people in the surprise, but also have to for its difficult road feel pity: good standards only by the industry browser good support is considered "standard". CSS3 Standard has been proposed for several years, but currently can achieve her browser is not many, although some browsers can implement some of the specifications, but what is the use of it? Faced with more compatibility issues, Csser are only expected to sigh. Even so, how can we stop before we are forward-looking? Today we're going to "look ahead" a pseudo-class selector for CSS3 ": Nth-child ()".

Grammar:

: Nth-child (an+b)

Why choose her, because I think this selector is one of the most learned. Unfortunately, as far as I can measure, there are only opera9+ and safari3+ to support her well. A front-end UI framework that can 500% improve development efficiency!

Describe:

pseudo-class : Nth-child () parameter is an+b , if according to w3.org on the description, written in Chinese, it is likely to make people dizzy, coupled with the author's writing level is limited, so I decided to avoid an+b, split it into 5 ways to write a total of 5 parts to illustrate.

the first type: simple numeric numbering notation

: Nth-child (number )

matches the first number element directly. Parameter number must be an integer greater than 0.

Example:

Li:nth-child (3) {Background:orange;} /* Set the background of the 3rd Li to Orange */

second type: multiple notation

: Nth-child (an )

matches all elements in multiples of a. wherein the parameter an in the letters n is not the default, it is a multiple notation, such as 3n, 5n.

Example:

Li:nth-child (3n) {background:orange;} /* Set the background of Li with the 3rd, 6th, 9th 、...、 All multiples of 3 to orange */

The third type: multiple grouping matching

: Nth-child (an+b) and: Nth-child (an-b)

The elements are grouped first, each group hasaAbIs the ordinal of a member within a group, where the letterNand the plus sign+Not the default, position is not interchangeable, this is the symbol of the notation, wherea,bare either positive integers or 0. such as 3n+1, 5n+1. However, the plus sign can become a minus sign, which matches the first B in the group. (In fact anThe front can also be a minus sign, but leave it to the next section. ) can 500% improve the development efficiency of the front-end UI Framework!

Example:

Li:nth-child (3n+1) {background:orange;} /* Match 1th, 4th, 7th 、...、 1th li*/for each of the 3 groups

Li:nth-child (3n+5) {background:orange;} /* Match 5th, 8th, 11th 、...、 1th li*/for each of the 3 groups starting from 5th

Li:nth-child (5n-1) {background:orange;} /* Match 5-1=4, section 10-1=9 、...、 5th of multiples minus 1 li*/

Li:nth-child (3n±0) {background:orange;} /* Equivalent (3n) */

Li:nth-child (±0n+3) {background:orange;} /* Equivalent (3) */

Fourth type: Inverse multiple grouping matching

: Nth-child (-an+b)

Here a negative one is not the default, otherwise meaningless. This time with: Nth-child (an+1)Similar, all match 1th, but the difference is that it is counted backwards from the firstbSo that it does not match up to a maximum ofbA.

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 the 8th) LI, this more practical point, used to limit the previous N matches often used to */can 500% improve the development efficiency of the front-end UI Framework!

Fifth type: Parity match

: Nth-child (odd " and  :nth-child (even )

Match the elements with the odd and even numbers, respectively. The odd (odd) is the same as the (2n+1) result; even (even) is the same as (2n+0) and (2n) results.

Css3:nth-child () Pseudo class selector