:nth-child 选择器

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 所以匹配不到任何元素
}

你可能感兴趣的:(:nth-child 选择器)