精通 CSS3 中的 :nth-child 伪类选择器

CSS 拥有很多选择器，其中伪类选择器是 CSS3 中心加入的，:nth-child 是众多伪类选择器中的一个，也是用法和变化最多的一种选择器，我们提供合适的参数，可以选择几乎所有任意的元素。

基本用法

可以设置一个具体的数字，选择某个指定数字索引的元素，注意这里的数字索引是从 1 开始计算，而不是我们通常认为的 0。

:nth-child(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;
}

当设置一个数字的时候，他允许你具体的选择某个元素。

范围选择

节点元素选择器不仅可以打个选择，也可以范围性选择，请看下面的示例。

:nth-child(n+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;
}

:nth-child(-n+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;
}

nth-child(n+4):nth-child(-n+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;
}

nth-child(n+2):nth-child(odd):nth-child(-n+9)

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

nth-child(3n+1):nth-child(even)

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

类型选择

:nth-of-type(3)

/* these are represented with blue circles */
span:nth-of-type(3) {
    background-color: #298EB2;
    box-shadow: inset -3px -3px 10px rgba(0, 0, 0, 0.4), 0 0 10px black;
}

/* these are represented with orange squares */
div:nth-of-type(4) {
    background-color: #E17149:
    box-shadow: inset -3px -3px 10px rgba(0, 0, 0, 0.4), 0 0 10px black; 
}

类型范围选择

span:nth-of-type(n+3)
div:nth-of-type(2n+2)

/* these are represented with blue circles */
span:nth-of-type(n+3) {
    background-color: #298EB2;
    box-shadow: inset -3px -3px 10px rgba(0, 0, 0, 0.4), 0 0 10px black;
}

/* these are represented with orange squares */
div:nth-of-type(2n+2) {
    background-color: #E17149:
    box-shadow: inset -3px -3px 10px rgba(0, 0, 0, 0.4), 0 0 10px black; 
}

span:nth-of-type(-n+4)
div:nth-of-type(-n+5)

/* these are represented with blue circles */
span:nth-of-type(-n+4) {
    background-color: #298EB2;
    box-shadow: inset -3px -3px 10px rgba(0, 0, 0, 0.4), 0 0 10px black;
}

/* these are represented with orange squares */
div:nth-of-type(-n+5) {
    background-color: #E17149:
    box-shadow: inset -3px -3px 10px rgba(0, 0, 0, 0.4), 0 0 10px black; 
}

span:nth-of-type(n+3):nth-of-type(-n+6)
div:nth-of-type(n+1):nth-of-type(-n+3)

/* these are represented with blue circles */
span:nth-of-type(n+3):nth-of-type(-n+6) {
    background-color: #298EB2;
    box-shadow: inset -3px -3px 10px rgba(0, 0, 0, 0.4), 0 0 10px black;
}

/* these are represented with orange squares */
div:nth-of-type(n+1):n-th-of-type(-n+3) {
    background-color: #E17149:
    box-shadow: inset -3px -3px 10px rgba(0, 0, 0, 0.4), 0 0 10px black;
}

span:nth-of-type(n+3):nth-of-type(odd):nth-of-type(-n+6)
div:nth-of-type(n+1):nth-of-type(even):nth-of-type(-n+3)

/* these are represented with blue circles */
span:nth-of-type(n+3):nth-of-type(odd):nth-of-type(-n+7) {
    background-color: #298EB2;
    box-shadow: inset -3px -3px 10px rgba(0, 0, 0, 0.4), 0 0 10px black;
}

/* these are represented with orange squares */
div:nth-of-type(n+1):nth-ofo-type(even):nth-of-type(-n+3)  {
    background-color: #E17149:
    box-shadow: inset -3px -3px 10px rgba(0, 0, 0, 0.4), 0 0 10px black; 
}