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(8) 可以让你选中父元素下唯一的第8个子元素
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+6) ，就相当于让你选中第6个 :nth-child(6) 和其后的所有子元素
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+9)，就相当让你选中第9个和其之前的所有子元素
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+4):nth-child(-n+8) 我们可以选中某一范围内子元素，上面的例子里是从第4个到第8个子元素
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(n+2):nth-child(odd):nth-child(-n+9) 我们将会选中的子元素是从第2位到第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) 我们可以每隔3个选中一个，也就是第 1, 4, 7 和 10 个子元素，但通过使用 :nth-child(even) 我们过滤掉了奇数位子元素，也就是 1 和 7，于是，剩下的子元素只有 4 和 10。
/* 用蓝色圆斑表示 */
span:nth-of-type(3) {
background-color: #298EB2;
box-shadow: inset -3px -3px 10px rgba(0, 0, 0, 0.4), 0 0 10px black;
}
/* 用桔色方块表示 */
div:nth-of-type(4) {
background-color: #E17149:
box-shadow: inset -3px -3px 10px rgba(0, 0, 0, 0.4), 0 0 10px black;
}
使用 :nth-of-type()，我们可以指定相同的子元素类型，然后再选择。
/* 用蓝色圆斑表示 */
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;
}
/* 用橘色方块表示 */
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+3) 或 div:nth-of-type(2n+2)，首先指定是相同的子元素类型，然后在这些类型里选择...
/* 用蓝色圆斑表示 */
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;
}
/* 用橘色方块表示 */
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+4) or div:nth-of-type(-n+5)，首先指定是相同的子元素类型，然后在这些类型里选择...
/* 用蓝色圆斑表示 */
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;
}
/* 用橘色方块表示 */
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;
}
使用 :nth-of-type(n+3):nth-of-type(-n+6) 和 div:nth-of-type(n+1):nth-of-type(-n+3)，首先指定是相同的子元素类型，然后在这些类型里选择...这个例子中选中的将会是第 1-3 和 3-6 个子元素。
/* 用蓝色圆斑表示 */
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;
}
/* 用橘色方块表示 */
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;
}
使用 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)，你既能够限制是在相同类型子元素里选择，同时指定选择的起始位置和结束位置。这里同时使用了奇偶位限制。所有，最后剩下的是方 3 & 5 和 圆 2。