CSS3 Pseudo class selector: Nth-child () usage detailed

The emergence of CSS3 has undoubtedly brought great advantages to the front-end developers, today we highlight a new emergence of the powerful pseudo-class selector CSS3: Nth:child (); For the sake of understanding, I will show you the project page that I have done today. So that we can intuitively and clearly understand the function and use of this pseudo-class selector

1. First of all, we understand the syntax of the Pseudo class:: Nth-child (AN+B)

PS: Unfortunately, the Pseudo class selector does not support IE browser, when to be compatible with IE browser, we only have each Li to add the class name to them

2. This is the page effect we want to achieve

Step One:

Write the HTML code first.

<div class= "Topone-ul" >
<ul class= "Toponeul" >
<li>
<a href= "#" >
<div class= "Topone-img" ></div>
<p>app Design </p>
</a>
</li>
<li>
<a href= "#" >
<div class= "Topone-img" ></div>
<p> Web Design </p>
</a>
</li>
<li>
<a href= "#" >
<div class= "Topone-img" ></div>
<p> Interactive Design </p>
</a>
</li>
<li>
<a href= "#" >
<div class= "Topone-img" ></div>
<p>logo Design </p>
</a>
</li>
<li>
<a href= "#" >
<div class= "Topone-img" ></div>
<p>vi Design </p>
</a>
</li>
</ul>
</div>

Add Style

. topone-ul {
margin:0 Auto;
margin-top:60px;
width:470px;
height:80px;
}
. Toponeul Li {
Float:left;
margin-right:40px;
width:60px;
height:100%;
Text-align:center;
}
. Toponeul Li:nth-child (5) {
margin-right:0px;
}
. Toponeul Li a {
Color: #fff;
line-height:50px;
}
From the code we can see that we are using <ul></ul><li></li> tag, where each of the icons in Li I am using Sprite, the whole in a picture, as a background map, by moving position, add to the corresponding Li,

Now to the sprite map as a background map to each of the <li></li>, how to do???

Do you want to add a class name to each <li></li>?? This is too much trouble!

Now we have a good way to use CSS3: Nth-child () to add a background to each <li></li>

1. First <li></li> into the background can be written like this

. Toponeul Li:nth-child (1). topone-img {
margin:0 Auto;
width:24px;
height:25px;
Background:url (.. /images/high/sprite.png) No-repeat;
Background-position: -44px 0px;
}
: Nth-child (1) refers to the Toponeul of the first <li></li> below.

And so on: The second, the third, the fourth, the fifth

. Toponeul Li:nth-child (2). topone-img {
margin:0 Auto;
width:23px;
height:25px;
Background:url (.. /images/high/sprite.png) No-repeat;
Background-position: -68px 0px;
}
. Toponeul Li:nth-child (3). topone-img {
margin:0 Auto;
width:25px;
height:25px;
Background:url (.. /images/high/sprite.png) No-repeat;
Background-position: -91px 0px;
}
. Toponeul Li:nth-child (4). topone-img {
margin-left:15px;
width:23px;
height:25px;
Background:url (.. /images/high/sprite.png) No-repeat;
BACKGROUND-POSITION:4PX 0px;
}
. Toponeul Li:nth-child (5). topone-img {
margin:0 Auto;
width:25px;
height:25px;
Background:url (.. /images/high/sprite.png) No-repeat;
Background-position: -19px 0px;
}

Here's a second way of writing this pseudo-class selector: multiple notation

Syntax:: Nth-child (AN)

such as Li:nth-child (3n), Li:nth-child (5n), li:nth-child (2n) Li is 3 times times, 5 times times, twice times respectively.
For example:

Li:nth-child (3n) {background: #000} means to set the background of Li with the 3rd, 6th, 9th 、...、 multiples of 3 to black
The third way to do this is to follow this pseudo-class selector: multiple packet matching

Syntax:: Nth-child (An+b) with: Nth-child (an-b)

Example:

Li:nth-child (3n+1) {background: #000;} It means to set the background of the 1th Li of the 1th, 4th, 7th 、...、 for each of the 3 groups as Black

Li:nth-child (3n+5) {background: #000;} It means to set the 5th, 8th, 11th 、...、 from the beginning of 5th to a set of 3 for each of the 1th Li's background black

Li:nth-child (5n-1) {background: #000;} This means that the background of 5-1=4, 10-1=9 、...、 5th minus 1 Li is set to black

Li:nth-child (3n±0) {background: #000;} Equivalent to (3n) background set to Black

Li:nth-child (±0n+3) {background: #000;} Equivalent to (3) the background set to black
The fifth use of this pseudo class selector is described below: parity matching

Syntax:: Nth-child (Odd) with: Nth-child (even)

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

Table odd even-numbered row definition style can be written as

. Table > Tr:nth-child (<strong>even</strong>) > td {Background-color: #000;}   (even line) means to set the background of the 2nd, 4th, 6th 、...、 for each of the 2 groups of Li to Black
. Table > Tr:nth-child (<strong><em>odd</em> </strong>) > td {Background-color: #000;}   (odd line) means to set the background of the 1th, 3rd, 5th 、...、 for each of the 2 groups of Li to be black
OK, now is not the css3:        : Nth-child () Pseudo class selector has been very understanding, now we can quickly and conveniently realize their desired effect!