Css tall selector: nth-child () application instance

: The nth-child (n) selector matches the nth child element of its parent element. This article introduces the examples of using the cssnth-child selector to coders. For more information about coders, see. The front-end Buddy must have been familiar with a magic in css. He can easily select the desired tag and add a style to it. Is it awesome? It is" : Nth-child".

Below I will use several typical examples to explain the actual use of nth-child:

Tips:If you still use a lower version of IE browser, Please bypass it!

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

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

: Nth-child (n + 4): select a tag greater than or equal to 4, and "n" indicates an integer, the same below

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

: Nth-child (-n + 4): select a tag smaller than or equal to 4

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

: Nth-child (2n) selects an even number of tags, 2n can also be even

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

: Nth-child (2n-1) selects an odd number of labels. 2n-1 can be odd.

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

: Nth-child (3n + 1) custom selection tag, 3n + 1 indicates "take one every two"

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

: Last-child selects the last tag

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

: Nth-last-child (3): select the last tags, and 3: Select 3rd tags.