: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 所以匹配不到任何元素
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容