CSS3:nth-child() pseudo-class selector_html/css_WEB-ITnose

The power of CSS3 is amazing. People are pleasantly surprised, but they also have to feel sorry for its difficult road: a good standard can only be considered a "standard" if it is well supported by industry browsers. The CSS3 standard has been proposed for several years, but currently there are not many browsers that can implement it. Although some browsers can implement some of the specifications, what is the use of it? Faced with more compatibility issues, CSSers can only sigh in despair. Even so, how can we, who are forward-looking, stop moving forward? Today we will “preview” a CSS3 pseudo-class selector “:nth-child()” .

Grammar:

:nth-child(an+b)

Why choose her, because I think this selector is the most knowledgeable one. Unfortunately, according to my testing, currently only Opera9 and Safari3 can support her well. A front-end UI framework that can improve development efficiency by 500%!

Description:

Pseudo class :nth-child() The parameter of is an b. If you follow the description on w3.org, it is written as Chinese may make people dizzy, and the author's writing skills are limited, so I decided to avoid the an b statement and split it into 5 writing methods and a total of 5 parts to explain.

The first way: simple number writing method

:nth-child(number)

directly matches the number element. The parameter number must be an integer greater than 0.

Example:

li:nth-child(3){background:orange;}/*把第3个LI的背景设为橙色*/

Second: Multiple writing

:nth- child(an)

matches all elements that are multiples of a. The letter n in parameter an cannot be omitted. It is a symbol of multiple writing, such as 3n, 5n.

Example:

li:nth-child(3n){background:orange;}/* Put the background of the 3rd, 6th, 9th, ..., all multiples of 3 LI Set to orange*/

Third type: multiple group matching

:nth-child(an b) and :nth-child(an-b )

First group the elements, each group has a, b is the serial number of the member in the group, the letter n and the plus sign cannot be defaulted, and the positions cannot be exchanged. This is a sign of this writing method , where a and b are both positive integers or 0. Such as 3n 1, 5n 1. But the plus sign can be changed to a minus sign, in which case the a-bth one in the group is matched. (In fact, an can also be preceded by a negative sign, but leave it to the next part.) A front-end UI framework that can improve development efficiency by 500%!

Example:

li:nth-child(3n 1){background:orange;}/* Matches the 1st, 4th, 7th,..., every 3 groups. The 1st LI*/

li:nth-child(3n 5){background:orange;}/*matches the 5th, 8th, 11th,..., and every 3rd one starting from the 5th is The 1st LI*/

li:nth-child(5n-1){background:orange;}/*matches the 5th-1=4, 10th-1=9,…, The 5th multiple is minus 1 LI*/

li:nth-child(3n±0){background:orange;}/*equivalent to (3n)*/

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

The fourth way: reverse multiple group matching

:nth-child(-an b)

One negative and one positive here cannot be defaulted, otherwise it will be meaningless. At this time, it is similar to :nth-child(an 1), both matching the first one, but the difference is that it counts backwards, starting from the b-th child, so it matches There will not be more than b at most.

Example:

li:nth-child(-3n 8){background:orange;}/*match the 8th, 5th and 2nd LI*/

li:nth-child(-1n 8){background:orange;}/* or (-n 8), matches the first 8 (including the 8th) LI. This is more practical and is used to limit the first N matches. Often used */ A front-end UI framework that can improve development efficiency by 500%!

The fifth type: odd-even matching

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

Match elements with odd and even numbers respectively. The odd number (odd) has the same result as (2n 1); the even number (even) has the same result as (2n 0) and (2n).