jQuery 顺便学习下CSS选择器 奇偶匹配nth-child(even)


Posted in Javascript onMay 24, 2010

对此,我把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中的一些选择器。
希望能坚持下来。

Javascript 相关文章推荐
jquery.alert 弹出式复选框实现代码
Jun 15 Javascript
JavaScript 动态创建VML的方法
Oct 14 Javascript
jquery图片不完全按比例自动缩小的简单代码
Jul 29 Javascript
利用js(jquery)操作Cookie的方法说明
Dec 19 Javascript
微信小程序 Audio API详解及实例代码
Sep 30 Javascript
小程序开发实战:实现九宫格界面的导航的代码实现
Jan 19 Javascript
Google 爬虫如何抓取 JavaScript 的内容
Apr 07 Javascript
jQuery.Ajax()的data参数类型详解
Jul 23 jQuery
bootstrap模态框弹出和隐藏,动态改变中间内容的实例
Aug 10 Javascript
Iview Table组件中各种组件扩展的使用
Oct 20 Javascript
js实现固定区域内的不重叠随机圆
Oct 24 Javascript
解决vue-router路由拦截造成死循环问题
Aug 05 Javascript
jquery 模拟类搜索框自动完成搜索提示功能(改进)
May 24 #Javascript
mysql输出数据赋给js变量报unterminated string literal错误原因
May 22 #Javascript
让mayfish支持mysqli数据库驱动的实现方法
May 22 #Javascript
JavaScript 笔记二 Array和Date对象方法
May 22 #Javascript
Javascript笔记一 js以及json基础使用说明
May 22 #Javascript
javascript Array数组对象的扩展函数代码
May 22 #Javascript
javascript 正则替换 replace(regExp, function)用法
May 22 #Javascript
You might like
php 无极分类(递归)实现代码
2010/01/05 PHP
php设计模式 DAO(数据访问对象模式)
2011/06/26 PHP
kohana框架上传文件验证规则写法示例
2014/07/14 PHP
html+js实现动态显示本地时间
2013/09/21 Javascript
js有序数组的连接问题
2013/10/01 Javascript
jquery实现点击消失的代码
2014/03/03 Javascript
动态的9*9乘法表效果的实现代码
2016/05/16 Javascript
浅析Bootstrap表格的使用
2016/06/23 Javascript
探究Vue.js 2.0新增的虚拟DOM
2016/10/20 Javascript
vue.js组件vue-waterfall-easy实现瀑布流效果
2017/08/22 Javascript
Vue中android4.4不兼容问题的解决方法
2018/09/04 Javascript
Javascript实现时间倒计时功能
2018/11/17 Javascript
通过C++学习Python
2015/01/20 Python
Python制作Windows系统服务
2017/03/25 Python
python3大文件解压和基本操作
2017/12/15 Python
详解Python中的正则表达式
2018/07/08 Python
python执行精确的小数计算方法
2019/01/21 Python
详解python项目实战:模拟登陆CSDN
2019/04/04 Python
Python Numpy库datetime类型的处理详解
2019/07/13 Python
python多任务之协程的使用详解
2019/08/26 Python
Python 用三行代码提取PDF表格数据
2019/10/13 Python
使用Python实现 学生学籍管理系统
2019/11/26 Python
python3 webp转gif格式的实现示例
2019/12/10 Python
关于canvas.toDataURL 在iOS运行失败的问题解决
2020/09/16 HTML / CSS
Nuts.com:优质散装,批发坚果、干果和巧克力等
2017/03/21 全球购物
消防安全员岗位职责
2014/03/10 职场文书
洗发水广告词
2014/03/13 职场文书
广播体操口号
2014/06/18 职场文书
资源环境与城乡规划管理专业自荐书
2014/09/26 职场文书
2014年医院后勤工作总结
2014/12/06 职场文书
第二次离婚起诉书
2015/05/18 职场文书
导游词之新疆尼雅遗址
2019/10/16 职场文书
CSS3 实现NES游戏机的示例代码
2021/04/21 HTML / CSS
MySQL笔记 —SQL运算符
2022/01/18 MySQL
Vertica集成Apache Hudi重磅使用指南
2022/03/31 Servers
Python获取字典中某个key的value
2022/04/13 Python