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 相关文章推荐
IE无法设置短域名下Cookie
Sep 23 Javascript
jQuery基本过滤选择器使用介绍
Apr 18 Javascript
jQuery ajax调用WCF服务实例
Jul 16 Javascript
简单纯js实现点击切换TAB标签实例
Aug 23 Javascript
整理Javascript事件响应学习笔记
Dec 02 Javascript
JS+Canvas 实现下雨下雪效果
May 18 Javascript
Angular使用ng-messages与PHP进行表单数据验证
Dec 28 Javascript
使用Javascript判断浏览器终端设备(PC、IOS(iphone)、Android)
Jan 04 Javascript
详解vue与后端数据交互(ajax):vue-resource
Mar 16 Javascript
基于vue循环列表时点击跳转页面的方法
Aug 31 Javascript
详解nuxt路由鉴权(express模板)
Nov 21 Javascript
node.js开发辅助工具nodemon安装与配置详解
Feb 06 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 array_pop()数组函数将数组最后一个单元弹出(出栈)
2011/07/12 PHP
php去除HTML标签实例
2013/11/06 PHP
Laravel 5.4向IoC容器中添加自定义类的方法示例
2017/08/15 PHP
在线游戏大家来找茬II
2006/09/30 Javascript
js下通过prototype扩展实现indexOf的代码
2010/12/08 Javascript
基于JQUERY的多级联动代码
2012/01/24 Javascript
jQuery ajax serialize()方法的使用以及常见问题解决
2013/01/27 Javascript
用js代码和插件实现wordpress雪花飘落效果的四种方法
2014/12/15 Javascript
jQuery实现设置、移除文本框默认值功能
2015/01/13 Javascript
JavaScript实现的双向跨域插件分享
2015/01/31 Javascript
js实现带按钮的上下滚动效果
2015/05/12 Javascript
js鼠标点击按钮切换图片-图片自动切换-点击左右按钮切换特效代码
2015/09/02 Javascript
JS实现的3D拖拽翻页效果代码
2015/10/31 Javascript
使用Javascript写的2048小游戏
2015/11/25 Javascript
微信小程序左滑删除效果的实现代码
2017/02/20 Javascript
xmlplus组件设计系列之列表(4)
2017/04/26 Javascript
微信小程序学习笔记之获取位置信息操作图文详解
2019/03/29 Javascript
jquery实现垂直无限轮播的方法分析
2019/07/16 jQuery
JavaScript实现更换背景图片
2019/10/18 Javascript
小程序实现简单语音聊天的示例代码
2020/07/24 Javascript
vue中重定向redirect:‘/index‘,不显示问题、跳转出错的完美解决
2020/09/28 Javascript
Python中列表(list)操作方法汇总
2014/08/18 Python
Python中的进程分支fork和exec详解
2015/04/11 Python
对比Python中__getattr__和 __getattribute__获取属性的用法
2016/06/21 Python
python如何给字典的键对应的值为字典项的字典赋值
2019/07/05 Python
Python限制内存和CPU使用量的方法(Unix系统适用)
2020/08/04 Python
深入浅析pycharm中 Make available to all projects的含义
2020/09/15 Python
Python3.9最新版下载与安装图文教程详解(Windows系统为例)
2020/11/28 Python
BLACKMORES澳洲官网:澳大利亚排名第一的保健品牌
2018/09/27 全球购物
餐饮业的创业计划书范文
2013/12/26 职场文书
学校评语大全
2014/05/06 职场文书
我的梦想演讲稿1000字
2014/08/21 职场文书
交通局领导班子群众路线教育实践活动对照检查材料思想汇报
2014/10/09 职场文书
2014小学数学教师个人工作总结
2014/12/18 职场文书
2016领导干部廉洁自律心得体会
2016/01/13 职场文书
Python Matplotlib绘制等高线图与渐变色扇形图
2022/04/14 Python