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