Css3:nth-child () pseudo class selector, table table odd even rows define style

Turn to self-love design original link http://www.dangshopex.com/jishufenxiang/WEBkaifajishu/8653.html

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.

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's argument, Split it into 5 ways to describe a total of 5 parts.

The first type: simple numerical sequence notation

: Nth-child (number)

Matches the first number element directly. The 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 */

The second type: multiple notation

: Nth-child (an)

Matches all elements that have multiples of a. Where the letter n in the parameter an 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)

First, the elements are grouped, each group has a,b is the number of members in the group, where the letter n and plus + is not the default, position is not interchangeable, which is the symbol of the notation, where a ,b are 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, an front can also be a minus sign, but left to the next part of the talk.) ）

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. At this point and : Nth-child (an+1) similar, are matched to the 1th, but the difference is that it is calculated backwards, from the beginning of the first b to calculate, so it does not match the maximum of 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 the 8th) LI, this more practical point, used to limit the first n matches often used to */

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.

Author's opinion: Table odd even row definition style can be written as
. Table > Tr:nth-child (even) > td {} (even lines)
. Table > Tr:nth-child (odd) > td {Background-color: #ccc;} (Odd lines)

Css3:nth-child () pseudo class selector, table table odd even rows define style