:nth-child的用法

1.

:nth-child(8) 选中第8个子元素

li:nth-child(8) span {
    background-color: #298EB2;
    box-shadow: -3px -3px 10px rgba(0, 0, 0, 0.4), inset 0 0 10px black;
}

2

:nth-child(n+6) 选中从第6个开始的子元素

li:nth-child(n+6) span {
    background-color: #298EB2;
    box-shadow: inset -3px -3px 10px rgba(0, 0, 0, 0.4), 0 0 10px black;
}

3

负方向范围
:nth-child(-n+9) 选中从第1个到第9个子元素

li:nth-child(-n+9) span {
    background-color: #298EB2;
    box-shadow: inset -3px -3px 10px rgba(0, 0, 0, 0.4), 0 0 10px black;
}

4

前后限制范围
nth-child(n+4):nth-child(-n+8) 选中第4-8个子元素

li:nth-child(n+4):nth-child(-n+8) span {
    background-color: #298EB2;
    box-shadow: inset -3px -3px 10px rgba(0, 0, 0, 0.4), 0 0 10px black;
}

转载链接地址：http://www.webhek.com/misc/mastering-nth-child/

PS:虽然很强大，但是感觉实用性不强啊。