nth-child 可以接受两个关键字:odd 和 even
ul li:nth-child(even) {
// 匹配 2 4 6...偶数元素
}
ul li:nth-child(odd) {
// 匹配 1 3 5...奇数元素
}
nth-child 的参数也可以是一个方程式,最简单的程式是一个数字
ul li:nth-child(n) {
// n 从 0 开始,从 1 开始匹配到元素
}
n 也可以为负值,但是如果结果是负数,则不会匹配到任何元素。所以你需要再使用一个加法等式来使结果重新回到正数。
这里有一个相当聪明的技术,你可以用它来选择前n个子元素。比如(-n+3):
ul li:nth-child(-n+3) {
// -0 + 3 = 3
// -1 + 3 = 2
// -2 + 3 = 1
// -3 + 3 = 0 值为 0 所以匹配不到任何元素
}