CSS Learning Notes (9)--Detailed CSS: the use of Nth-child

Detailed CSS: Nth-child usage

The front-end buddies must have been in touch with a magical thing in CSS, you can easily choose the label you want and add style to the changes, is not very force, it is ": Nth-child."

Below I will use a few typical examples to explain to you: the actual use of Nth-child:

Tips: Also use the lower version of IE browser Buddies please bypass!

: Nth-child (2) Select the first few tags, "2 can be the number you want"

. demo01 li:nth-child(2) {background:#090}    

: Nth-child (n+4) selects a value greater than or equal to 4, and "n" denotes an integer from the same

Click here to see the example show

. demo01 li:nth-child(n+4) {background:#090}  

: Nth-child (-n+4) Select less than or equal to 4 labels

Click here to see the example show

. demo01 li:nth-child(-n+4) {background:#090} 

: Nth-child (2n) Select even label, 2n can also be even

Click here to see the example show

. demo01 li:nth-child(2n) {background:#090}    

: Nth-child (2n-1) Select Odd Label, 2n-1 can be odd

Click here to see the example show

. demo01 li:nth-child(2n-1) {background:#090} 

: Nth-child (3n+1) custom selection label, 3n+1 means "two take one"

Click here to see the example show

. demo01 li:nth-child(3n+1) {background:#090}  

: Last-child Select Last Label

Click here to see the example show

. demo01 Li:last-child{background:#090}    

: Nth-last-child (3) Select the last number of labels, 3 means select the 3rd

Click here to see the example show

. demo01 li:nth-last-child(3) {background:#090} 

These usages of ok,:nth-child are useful in practice and do not need to be individually labeled with an ID or class for the tag that needs to be selected.

CSS Learning Notes (9)--Detailed CSS: the use of Nth-child