对此，我把CSS3标准中nth-child()用法大致介绍下：
CSS3伪类选择器：nth-child()
简单的归纳下nth-child()的几种用法。
第一：nth-child(number) 直接匹配第number个元素。参数number必须为大于0的整数。
(EG) li:nth-child(3){background:orange;}/*把第3个LI的背景设为橙色*/
第二：nth-child(an) 匹配所有倍数为a的元素。其中参数an中的字母n不可缺省，它是倍数写法的标志，如3n、5n。
(EG) li:nth-child(3n){background:orange;}/*把第3、第6、第9、…、所有3的倍数的LI的背景设为橙色*/
第三：nth-child(an+b) 与 :nth-child(an-b) 先对元素进行分组，每组有a个，b为组内成员的序号，其中字母n和加号+不可缺省，位置不可调换，这是该写法的标志，其中a,b均为正整数或0。如3n+1、5n+1。但加号可以变为负号，此时匹配组内的第a-b个。（其实an前面也可以是负号，但留给下一部分讲。）
(EG)li:nth-child(3n+1){background:orange;}/*匹配第1、第4、第7、…、每3个为一组的第1个LI*/
li:nth-child(3n+5){background:orange;}/*匹配第5、第8、第11、…、从第5个开始每3个为一组的第1个LI*/
li:nth-child(5n-1){background:orange;}/*匹配第5-1=4、第10-1=9、…、第5的倍数减1个LI*/
li:nth-child(3n±0){background:orange;}/*相当于(3n)*/
li:nth-child(±0n+3){background:orange;}/*相当于(3)*/
第四：nth-child(-an+b) 此处一负一正，均不可缺省，否则无意义。这时与:nth-child(an+1)相似，都是匹配第1个，但不同的是它是倒着算的，从第b个开始往回算，所以它所匹配的最多也不会超过b个。
(EG) li:nth-child(-3n+8){background:orange;}/*匹配第8、第5和第2个LI*/
li:nth-child(-1n+8){background:orange;}/*或(-n+8)，匹配前8个（包括第8个）LI，这个较为实用点，用来限定前面N个匹配常会用到*/
第五：nth-child(odd) 与 :nth-child(even) 分别匹配序号为奇数与偶数的元素。奇数(odd)与(2n+1)结果一样；偶数(even)与(2n+0)及(2n)结果一样。
jQuery中用此方法可以实现条纹效果：
$("table tr:nth-child(even)").addClass("striped");
even 可以换成别的参数，上面介绍的五种情况都可以。
后面的addClass("striped") striped 是个CSS class名称。
学习jquery顺便学习了 CSS中的一些选择器。
希望能坚持下来。
0
0
jQuery 顺便学习下CSS选择器 奇偶匹配nth-child(even)_jquery
php中文网
发布时间：2016-05-16 18:26:32
|1400人浏览过
|来源于php中文网
原创
相关文章
如何在 jQuery DataTables 中准确获取输入框所在行的索引
如何在 jQuery DataTables 中正确获取输入框所在行的索引
如何通过鼠标悬停控制浮动层的自动显示与隐藏
如何通过鼠标悬停控制浮层的自动显示与隐藏
如何用 JavaScript 实现鼠标移出时自动收起悬浮层（div）
本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
热门AI工具
相关专题
本专题系统整理batoto漫画官方网站最新可用入口，涵盖最新官网地址、网页版登录页面及防走失访问方式说明，帮助用户快速找到batoto漫画官方平台，稳定在线阅读各类漫画内容。
127
2026.02.25
本专题系统整理Steam官网最新可用入口，涵盖网页版登录地址、新用户注册流程、账号登录方法及官方游戏商店访问说明，帮助新手玩家快速进入Steam平台，完成注册登录并管理个人游戏库。
18
2026.02.25
本专题面向全栈开发者，系统讲解基于 TypeScript 构建前后端统一技术栈的工程化实践。内容涵盖项目分层设计、接口协议规范、类型共享机制、错误码体系设计、接口自动化生成与文档维护方案。通过完整项目示例，帮助开发者构建结构清晰、类型安全、易维护的现代全栈应用架构。
15
2026.02.25
本专题聚焦 Python 在数据工程场景下的实际应用，系统讲解 ETL 流程设计、数据抽取与清洗、批处理与增量处理方案，以及数据质量校验与异常处理机制。通过构建完整的数据处理流水线案例，帮助开发者掌握数据工程中的性能优化思路与工程化规范，为后续数据分析与机器学习提供稳定可靠的数据基础。
1
2026.02.25
本专题围绕 Java 在复杂业务系统中的建模与架构设计展开，深入讲解领域驱动设计（DDD）的核心思想与落地实践。内容涵盖领域划分、聚合根设计、限界上下文、领域事件、贫血模型与充血模型对比，并结合实际业务案例，讲解如何在 Spring 体系中实现可演进的领域模型架构，帮助开发者应对复杂业务带来的系统演化挑战。
1
2026.02.25
《Golang 生态工具与框架》系统梳理 Go 语言在实际工程中的主流工具链与框架选型思路，涵盖 Web 框架、RPC 通信、依赖管理、测试工具、代码生成与项目结构设计等内容。通过真实项目场景解析不同工具的适用边界与组合方式，帮助开发者构建高效、可维护的 Go 工程体系，并提升团队协作与交付效率。
18
2026.02.24
《Golang 性能优化专题》聚焦 Go 应用在高并发与大规模服务中的性能问题，从 profiling、内存分配、Goroutine 调度、GC 机制到 I/O 与锁竞争逐层分析。结合真实案例讲解定位瓶颈的方法与优化策略，帮助开发者建立系统化性能调优思维，在保证代码可维护性的同时显著提升服务吞吐与稳定性。
9
2026.02.24
Golang 面试题精选》系统整理企业常见 Go 技术面试问题，覆盖语言基础、并发模型、内存与调度机制、网络编程、工程实践与性能优化等核心知识点。每道题不仅给出答案，还拆解背后的设计原理与考察思路，帮助读者建立完整知识结构，在面试与实际开发中都能更从容应对复杂问题。
6
2026.02.24
《Golang 运行与部署实战》围绕 Go 应用从开发完成到稳定上线的完整流程展开，系统讲解编译构建、环境配置、日志与配置管理、容器化部署以及常见运维问题处理。结合真实项目场景，拆解自动化构建与持续部署思路，帮助开发者建立可靠的发布流程，提升服务稳定性与可维护性。
5
2026.02.24
热门下载
相关下载
精品课程
最新文章
